前端移动web高级详细解析二（1):https://developer.aliyun.com/article/1393385
02-动画
- 过渡：实现两个状态间的变化过程
- 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画实现步骤
- 定义动画
/* 方式一 */ @keyframes 动画名称 { from {} to {} } /* 方式二 */ @keyframes 动画名称 { 0% {} 10% {} ...... 100% {} }
- 使用动画
animation: 动画名称 动画花费时长;
animation复合属性
提示：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
animation拆分写法
案例-走马灯
- HTML 结构
<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>
- CSS 样式
.box { width: 600px; height: 112px; border: 5px solid #000; margin: 100px auto; overflow: hidden; } .box ul { display: flex; animation: move 6s infinite linear; } /* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */ @keyframes move { 0% { transform: translate(0); } 100% { transform: translate(-1400px); } } .box:hover ul { animation-play-state: paused; }
缝动画原理：复制开头图片到结尾位置（图片累加宽度 = 区域宽度）
精灵动画
- 核心
制作步骤
1.准备显示区域
盒子尺寸与一张精灵小图尺寸相同
2.定义动画
移动背景图（移动距离 = 精灵图宽度）
- 3.使用动画
steps(N)，N 与精灵小图个数相同
div { width: 140px; height: 140px; border: 1px solid #000; background-image: url(./images/bg.png); animation: run 1s steps(12) infinite; } @keyframes run { from { background-position: 0 0; } to { background-position: -1680px 0; } }
多组动画
animation: 动画一, 动画二, ... ... ;
03-综合案例-全名出游
背景
/* 大背景 */ /* 默认状态HTML和body的高度是0，所以导致cover缩放背景图不成功 */ html { height: 100%; } body { height: 100%; background: url(../images/f1_1.jpg) no-repeat center 0 / cover; /* background-size: cover; */ }
云彩位置和动画
- HTML 结构
<!-- 云 --> <div class="cloud"> <img src="./images/yun1.png" alt=""> <img src="./images/yun2.png" alt=""> <img src="./images/yun3.png" alt=""> </div>
- CSS 样式
/* 云 */ .cloud img { position: absolute; left: 50%; } .cloud img:nth-child(1) { margin-left: -250px; top: 20px; animation: cloud 1s infinite alternate linear; } .cloud img:nth-child(2) { margin-left: 400px; top: 100px; animation: cloud 1s infinite alternate linear 0.4s; } .cloud img:nth-child(3) { margin-left: -550px; top: 200px; animation: cloud 1s infinite alternate linear 0.6s; } @keyframes cloud { 100% { transform: translate(20px); } }
文字动画
- HTML 结构
<!-- 文字 --> <div class="text"> <img src="./images/font1.png" alt=""> </div>
- CSS 样式
/* 文字 */ .text img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: text 1s; } /* 默认 → 小 → 大 → 小 → 默认 */ @keyframes text { 0% { transform: translate(-50%, -50%) scale(1); } 20% { transform: translate(-50%, -50%) scale(0.1); } 40% { transform: translate(-50%, -50%) scale(1.4); } 70% { transform: translate(-50%, -50%) scale(0.8); } 100% { transform: translate(-50%, -50%) scale(1); } }
