当前位置：首页 > news >正文

HTML、CSS学习笔记4（3D转换、动画）

news 2026/2/7 16:31:38

一、空间转换（3D转换）

1.空间位移

语法：

取值：（正负均可）

透视：

2.空间旋转

3.立体呈现

二、动画（animation）

1.动画的使用

先定义动画

再调用定义好的动画

动画序列

2.动画常见属性

2.1复合写法编辑

2.2了解拆分写法

2.3 逐帧动画（两针之间跳格转动）&补间动画（平滑转动）编辑

2.4 案例：小人跑步

3.案例

3.1走马灯

一、空间转换（3D转换）

（素材：D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\素材(3)\素材）

使用transform属性实现元素在空间的位移、旋转、缩放等效果
空间：x、y、z轴，z轴位置与视线方向相同（正值指向自己）

1.空间位移

语法：

transform: translate3d(x,y,z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);x、y轴有变化，z轴并没有体现

取值：（正负均可）

像素单位数值
百分比

透视：

目标：使用perspective属性实现透视效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>透视效果</title><style>body {/* perspective添加给父级 */perspective: 1000px;}.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover {/* 正值指向自己（变大），负值变小 */transform: translateZ(200px);}</style>
</head><body><div class="box"></div>
</body></html>

2.空间旋转

注：

单位：deg
transform: rotateZ(360deg);与transform: rotate(360deg);效果相同
rotateX的时候可以保留透视属性（其父级）（perspective: 1000px;），没有的话图片旋转时会变扁
rotateY(60deg)时，也要保留透视属性（其父级）（perspective: 1000px;），否则没有立体旋转效果，而是水平变扁

3.立体呈现

案例：

代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D导航</title><style>ul {margin: 0;padding: 0;list-style: none;}.navs {position: relative;width: 300px;height: 40px;margin: 50px auto;}.navs li {float: left;width: 100px;height: 40px;line-height: 40px;transition: all .5s;transform-style: preserve-3d;/* 旋转：让大家在写代码的过程中看到立体盒子  *//* transform: rotateX(-20deg) rotateY(30deg); */}.navs li a {         position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.navs li a:first-child {background-color: green;transform: translateZ(20px);}.navs li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}.navs li:hover {transform: rotateX(-90deg);}</style>
</head><body><div class="navs"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div>
</body></html>

二、动画（animation）

（D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\素材(4)\素材）

动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

1.动画的使用

注：@keyframes写在style中，不需包括在某个元素里面，而调用动画的animation写在想要实现动画的相应那个元素里面

先定义动画

多个状态变化：（（百分比指的是动画总时长的占比）（一般不需在意）

/*1. 定义动画*/
@keyframes 动画名称 {0% {width: 100px;}10% {}15% {}100% {width: 200px;}
}

两个状态变化（从XX到XX）

@keyframes 动画名称 {from {}to {}
}

再调用定义好的动画

div {animation: 动画名称 动画花费时长；
}

动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

2.动画常见属性

2.1复合写法

animation: change 1s steps(3) 2s infinite alternate

注：

速度曲线：（速度变化是加速/减速/匀速）——linear表示匀速，steps(3)分步动画，将动画分成三等份去执行

延迟时间：控制动画的先后出场顺序 2s

重复次数：1. 3（表示重复3次） 2. 无限循环：infinite

动画方向：alternate(带有反向动画效果)

执行完毕时状态（两种状态）：1.backwards（默认值）:让动画停留在最开始的状态； 2.forwards:让动画停留在最终的状态；（要将重复次数和动画方向注释掉，否则没有效果）

2.2了解拆分写法

注：

动画名称和时长必须有（无论是拆分还是复合），否则没有动画效果；

建议：使用复合属性（方便），注意拆分的暂停动画

2.3 逐帧动画（两针之间跳格转动）&补间动画（平滑转动）

2.4 案例：小人跑步

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>精灵动画</title><style>.box {/* 1.准备显示区域 *//* 1680px/12 (总宽度1680px 12个小人): 保证显示区域的尺寸和一个精灵小图的尺寸相同 */width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);/* 3.使用动画 */animation: move 1s steps(12) infinite;}/* 2.定义动画 */@keyframes move {from {background-position: 0 0;}to {background-position: -1680px 0;/* 正的1680往右走 */}}</style>
</head><body><div class="box"></div>
</body></html>

思考：

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>精灵动画</title><style>.box {position: absolute;left: 0;width: 140px;height: 140px;background-image: url(./images/bg.png);/* 净零小图个数 */animation:move 1s steps(12) infinite ,/* 注意：多个动画名称之间用逗号隔开 */run 1s forwards;}@keyframes move {from {background-position: 0 0;}to {/* 1680:精灵图的宽度 */background-position: -1680px 0;}}/* 思考：想让小人跑远一些 *//* 定义一个盒子移动的动画 800px */@keyframes run {/* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码 *//* from {transform: translateX(0);} */to {transform: translateX(800px);}}</style>
</head><body><div class="box"></div>
</body></html>

3.案例

3.1走马灯

（D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.2.11作业\作业\走马灯）

3.1.1 分析

（方框的长度是3张图的长度）共7张图，但每张图片从左到右自动移动，无法判断哪张图是第一张图，同时每张图无空白移动（即紧密挨着），但是第5张图移动出时，第七张图旁边是空白，所以设置10张图，8、9、10图是原来的1、2、3图。

3.1.2 代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}img {width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {width: 2000px;animation: move 10s infinite linear;/* linear表示匀速 */}.box li {float: left;}/* 定义动画：位移，ul 向左侧移动  -1400 */@keyframes move {to {transform: translateX(-1400px);}}/* 用户鼠标移入box，动画暂停 */.box:hover ul {animation-play-state: paused;}</style></head><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div></body>
</html>

HTML、CSS学习笔记4（3D转换、动画）

目录一、空间转换（3D转换） 1.空间位移语法： 取值：（正负均可） 透视： 2.空间旋转 3.立体呈现二、动画（animation） 1.动画的使用先定义动画再调用定义好的动画 …...

编程日记 2023/2/28 5:33:42

java的分布式锁

什么是分布式锁分布式锁是指分布式环境下，系统部署在多个机器中，实现多进程分布式互斥的一种锁。为了保证多个进程能看到锁，锁被存在公共存储（比如 Redis、Memcache、数据库等三方存储中），以实现多个进程并…...

编程日记 2023/2/28 5:32:36

17- TensorFlow实现手写数字识别 (tensorflow系列) (项目十七)

项目要点模型创建: model Sequential()添加卷积层: model.add(Dense(32, activationrelu, input_dim100)) # 第一层需要 input_dim添加dropout: model.add(Dropout(0.2))添加第二次网络: model.add(Dense(512, activationrelu)) # 除了first, 其他层不要输入shape添加输出…...

编程日记 2023/2/28 5:30:25

Polkadot 基础

Polkadot Polkadot联合并保护了一个不断增长的专业区块链生态系统，称为parachains。Polkadot上的应用程序和服务可以安全地跨链通信，形成真正可互操作的去中心化网络的基础。真正的互操作性 Polkadot支持跨区块链传输任何类型的数据或资产，…...

编程日记 2023/2/28 5:29:13

spring源码编译

spring源码编译1、安装gradle2、拉取源码3、配置gradle文件来源及镜像仓库4、预编译5、验证6、可能遇到的报错6.1、jdk.jfr不存在6.2、checkstyleMain6.3、org.gradle.api.artifacts.result.ComponentSelectionReason.getDescription()Ljava/lang/String6.4、其他jdk&#xff1…...

编程日记 2023/2/28 5:28:06

防盗链是什么？带你了解什么是防盗链

目录什么是防盗链防盗链的定义防盗链的产生防盗链的实现什么是防盗链防盗链其实就是采用服务器端编程，通过url过滤技术实现的防止盗链的软件。比如：photo.abc.com/video.mp4 这个下载地址，如果没有装防盗链，别人就能轻…...

编程日记 2023/2/28 5:26:55

Linux基础命令-fdisk管理磁盘分区表

文章目录 fdisk 命令介绍命令格式基本参数 1）常用参数 2）fdisk菜单操作说明创建一个磁盘分区 1）创建分区 2）创建交换分区参考实例 1） 显示当前分区的信息 2） 显示每个磁盘的分区信息命令…...

编程日记 2023/2/28 5:25:41

（四）K8S 安装 Nginx Ingress Controller

ingress-nginx 是 Kubernetes 的入口控制器，使用NGINX作为反向代理和负载均衡器版本介绍版本1：Ingress NGINX Controller(k8s社区的ingres-nginx) 以 NGINX 开源技术为基础（kubernetes.io），可在GitHub的 kubernet…...

编程日记 2023/2/28 5:24:30

高频面试题

MyISAM和InnoDB是MySQL两种常见的存储引擎，它们之间有以下几点区别： 事务支持：MyISAM不支持事务处理，而InnoDB支持事务处理。行级锁：MyISAM只支持表级锁，而InnoDB支持行级锁，可以避免并发访问…...

编程日记 2023/2/28 5:23:21

js 字节数组操作，TCP协议组装

js字节数组，进制转换js基础知识数组 Array扩展操作符三个点（...）ArrayBufferslice() 数组复制reduce 对数组中的每个元素执行一个提供的函数,将其结果汇总为单个返回值splice 数组删除，添加，替换js 字节数组转数字以及…...

编程日记 2023/2/28 5:22:12

JavaScript的引入并执行-包含动态引入与静态引入

JavaScript的引入并执行-包含动态引入与静态引入 JavaScript引入方式 html文件需要引入JavaScript代码，才能在页面里使用JavaScript代码。静态引入行内式直接在DOM标签上使用 <!DOCTYPE html> <html lang"en"> <head><meta ch…...

编程日记 2023/2/28 5:21:05

第四阶段01-酷鲨商城项目准备

1. 关于csmall-product项目这是“酷鲨商城”大项目中的“商品管理”项目，是一个后台管理项目（给管理员，或运营人员使用的项目，并不是普通用户使用的），并且，只会涉及与发布商品可能相关的功能开…...

编程日记 2023/2/28 5:19:52

Uncaught ReferenceError: jQuery is not defined

今天在拉取项目部署到本地的时候遇到了一个问题特此记录一下 （以后闭坑） 我和同事同时拉取了一样的代码，结果同事的页面加载正常而我的页面像被狗啃了一样，知道是js的问题但是不知道问题出在哪里？后来还是同事帮我解决…...

编程日记 2023/2/28 5:17:28

面试阿里测开岗，被面试官针对，当场翻脸，把我的简历还给我，疑似被拉黑...

好家伙，金三银四一到，这奇葩事可真是多，前两天和粉丝聊天，他说前段时间面试阿里的测开岗，最后和面试官干起来了。我问他为什么，他说没啥，就觉得面试官太装了，就爱问一些虚而不实的…...

编程日记 2023/2/28 5:16:10

2. 驱动开发--驱动开发环境搭建

文章目录前言一、Linux中配置编译环境1.1 linux下安装软件的方法1.2 交叉编译工具链的安装1.2.1 测试是否安装成功1.3 设置环境变量1.3.1 将工具链导出到环境变量1.4 为工具链创建arm-linux-xxx符号链接二、搭建运行开发环境2.1 tftp网络方式加载内核和设备树文件2.2 nfs网络方…...

编程日记 2023/2/28 5:15:02

《数据库系统概论》学习笔记——第四章数据库安全

教材为数据库系统概论第五版（王珊） 这一章简单记一下那几条sql的用法和两种存取控制和审计（今年期末考了）吧，不知道有啥好考的数据库安全性问题的提出数据库的一大特点是数据可以共享数据共享必然带来数据库的安全…...

编程日记 2023/2/28 5:13:56

山洪径流过程模拟及洪水危险性评价

目录 1.洪水淹没危险性评价方法及技术讲解 2.GIS水文信息提取与分析(基于ArcGIS软件) 3.洪水淹没模拟水文分析：洪峰流量估算 4.洪水淹没模拟水力学分析：Hec-RAS实例操作 GIS水文分析（ArcHydro、Spatial Anlysist等模块）是流域…...

编程日记 2023/2/28 5:12:49

LeetCode HOT100 (23、32、33)

目录 23、合并K个升序链表 32、最长有效括号 33、搜索旋转排序数组 23、合并K个升序链表思路：采用顺序合并的方法，用一个变量 ans 来维护以及合并的链表，第 i 次循i 个链表和 ans合并，答案保存到 ans中。代码： …...

编程日记 2023/2/28 5:11:41

电力监控仪表主要分类

电力监控仪表是电工仪表行业的一个新兴、细分行业，类别属于安装式数字仪表，从模拟指针式仪表和电量变送器演变而来。随着计算机技术的发展，电力监控仪表已应用到电力系统的发、输、变、配、用的各个环节，实现对电网电参量的测量、…...

编程日记 2023/2/28 5:10:34

山野户外定位依赖GPS或者卫星电话就能完成么？

每当有驴友失联的新闻报道，很多的户外“老鸟”和“菜鸟”都在讲：为什么不带卫星电话，不带GPS……云云！提一个小小的问题：如果你拿着卫星电话、GPS或者其他即时通信的其他设备，你就能准定位你所处的位置么&a…...

编程日记 2023/2/28 5:09:29

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54