目录
动画
实现步骤：
1. 定义动画
2. 使用动画
动画属性：
animation复合属性代码：
animation复合属性拆分写法代码：
精灵动画制作步骤：
多组动画：
综合实例：
综合实例—走马灯（无缝动画）代码：
综合实例—全民出游主页动画代码：
动画
目标：使用animation添加动画效果
思考：过渡可以实现什么效果？
答：实现2个状态间的变化过程。
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质：是快速切换大量图片时在人脑中形成的具有连续性的画面 ；构成动画的最小单元：帧或动画帧。
实现步骤：
1. 定义动画
2. 使用动画
动画实现的步骤代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画实现步骤</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 使用动画的属性 */
animation: change 2s;
}
/* 一. 定义动画：从200变大到600 */
/* @keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
*/
/* 二. 定义动画：200 到 长500*宽300 到 800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>动画属性：
目标：使用animation相关属性控制动画执行过程
注意： 动画名称和动画时长必须赋值 ；取值不分先后顺序 ； 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间。
animation复合属性代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation复合属性</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* animation: change 1s */
/* animation: change 5s linear; */ /* linear匀速运动 */
/* 分步动画 */
/* animation: change 1s steps(3) */ /* 分成3部分执行 */
/* 3: 重复3次播放 */
/* animation: change 1s steps(3) 1s 3; */
/* 无限循环 ,带方向*/
/* animation: change 1s infinite alternate; */
/* 默认值, 动画停留在最初的状态 */
/* animation: change 1s backwards; */
/* 动画重复5次播放,带方向,停留在最初状态 */
/* animation: change 1s 5 alternate backwards; */
/* 动画停留在结束状态 */
/* animation: change 1s forwards; */
/* 动画分3步，重复5次播放,带方向,停留在结束状态 */
animation: change 1s steps(3) 1s 5 alternate forwards;
}
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
animation复合属性拆分写法代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation拆分写法</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
animation-name: change; /* 动画名称属性：animation-name */
animation-duration: 1s; /* 动画时长属性:animation-duration */
animation-iteration-count: infinite; /* 动画重复次数属性:animation-iteration-count */
}
.box:hover {
/* 鼠标移入的时候暂停动画 */
animation-play-state: paused; /* 动画暂停的属性: animation-play-state */
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
目标：使用steps实现逐帧动画 。
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)； 将动画过程等分成N份。
精灵动画制作步骤：
（1）准备显示区域： 设置盒子尺寸是一张小图的尺寸（图片的分辨率➗小图个数），背景图为当前精灵图。
（2）定义动画： 改变背景图的位置（移动的距离就是精灵图的宽度）。
（3）使用动画：添加速度曲线steps(N)，N与精灵图上小图个数相同 ； 添加无限重复效果。
多组动画：
思考：如果想让小人跑远一些，该如何实现？
答：精灵动画的同时添加盒子位移动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
/* 1.准备显示区域 1680/12=140 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/bg.png);
/* 12: 精灵小图的个数 ，多个动画“,”号隔开*/
animation:
/* 逐帧动画 速度曲线steps(12) ，原地一直跑：infinite*/
move 1s steps(12) infinite ,
/* 小人 跑远一些 ，改变盒子的位置，停留在终点位置：forwards*/
run 1s forwards
;
}
/* 2. 定义动画 */
@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>动画1
综合实例：
综合实例—走马灯（无缝动画）代码：
<!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; /* 10张图在一横排 */
/* 一直走:infinite;匀速运动:linear */
animation: move 6s infinite linear;
}
.box li {
float: left;
}
/* 定义动画:位移, ul 左侧使用 x -1400 */
@keyframes move {
from{
transform:translateX(0);
}
to {
transform: translateX(-1400px);
}
}
/* 用户鼠标移入box,动画暂停在ul上 */
.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>
<!-- 无缝动画，第567移动的时候,显示区域不能留白，将起始的123张图替补做显示区域的填充 -->
<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>
动画2
综合实例—全民出游主页动画代码：
html:(缩放背景图 background-size)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式表 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 云彩图片 作为背景-->
<div class="cloud">
<img src="./images/yun1.png" alt="">
<img src="./images/yun2.png" alt="">
<img src="./images/yun3.png" alt="">
<img src="./images/san.png" alt="">
<img src="./images/1.png" alt="">
<img src="./images/2.png" alt="">
<img src="./images/3.png" alt="">
<img src="./images/4.png" alt="">
<img src="./images/font1.png" alt="">
<img src="./images/lu.png" alt="">
</div>
</body>
</html>css:
* {
margin: 0;
padding: 0;
}
/* 修改html的高度跟浏览器一样高 */
html {
height: 100%;
}
body {
height: 100%;
/* 背景图水平居中 center 无重复：no-repeat */
background: url(./../images/f1_1.jpg) no-repeat center 0;
/* 缩放背景图 background-size*/
/* 图片等比例缩放, 当宽度或者高度和盒子尺寸相等, 图片就不再缩放了， 可能会留白*/
/* background-size: contain; */
/* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
background-size: cover;
}
/*
1. img 引入图片, 控制位置
2. 定义动画,使用动画
*/
.cloud img {
position: absolute;
left: 50%;
top: 0;
}
.cloud img:nth-child(1) {
margin-left: -300px;
top: 20px;
animation: cloud 1s infinite alternate;
}
.cloud img:nth-child(2) {
margin-left: 400px;
top: 100px;
animation: cloud 1s infinite alternate 0.2s;
}
.cloud img:nth-child(3) {
margin-left: -550px;
top: 200px;
animation: cloud 1s infinite alternate 0.4s;
}
.cloud img:nth-child(4){
width: 50px;
margin-left: -250px;
top: 150px;
animation: cloud 1s infinite alternate 0.2s;
transform: translateY(-20px);
transform: scale3D(1.5,1.5,1.5)
}
.cloud img:nth-child(5){
width: 50px;
margin-left: -227px;
top: 430px;
animation: cloud 1s infinite linear alternate 0.5s;
transform: translateY(-20px);
}
.cloud img:nth-child(6){
width: 50px;
margin-left: -47px;
top: 430px;
animation: cloud 1s infinite linear alternate 0.5s;
transform: translateY(-20px) ;
}
.cloud img:nth-child(7){
width: 50px;
margin-left: 117px;
top: 430px;
animation: cloud 1s infinite linear alternate 0.5s;
transform: translateY(-20px);
}
.cloud img:nth-child(8){
width: 50px;
margin-left: 257px;
top: 430px;
animation: cloud 1s infinite linear alternate 0.5s;
transform: translateY(-20px);
}
.cloud img:nth-child(9){
width: 250px;
margin-left:-150px;
top: 200px;
animation: cloud 1s infinite linear alternate 0.5s;
transform: translateY(-20px);
transform: scale3D(1.5,1.5,1.5)
}
.cloud img:nth-child(10){
width: 90px;
margin-left:50px;
top: 80px;
}
.cloud:hover img:nth-child(9){
animation-play-state: paused;
}
/* 云彩动画 */
@keyframes cloud {
to {
transform: translateX(20px);
}
}
效果图：
动画3
