20231103
文章目录
- 动画的实现步骤
- 动画属性
- 多组动画
- 案例-走马灯
动画的实现步骤
1、定义动画
@keyframes 动画名称{from{}to{}
}@keyframes 动画名称{0%{}50%{}100%{}
}
2、使用动画
animation:动画名称 动画花费时长;
3、案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画</title><style>.box {width: 200px;height: 100px;background-color: cadetblue;animation: change 1s;}@keyframes change {from {width: 200px;}to {width: 800px;}}</style>
</head><body><div class="box"></div>
</body></html>
动画属性
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
注意：
①动画名称和动画时长必须赋值
②取值不分先后顺序
③如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
无限循环：animation: change 1s infinite;
动画方向：animation: change 1s alternate;
执行完毕时状态：animation: change 1s backwards;（默认值，动画停留在开始状态）（forwards，动画停留在结束状态）
animation拆分写法：
动画名称：animation-name
动画时长：animation-duration
延迟时间：animation-delay
动画执行完毕时状态：animation-fill-mode（backwards：第一帧状态，forwards：最后一帧状态）
速度曲线：animation-timing-function（steps(数字)：逐帧动画）
重复次数：animation-iteration-count（infinite为无限循环）
动画执行方向：animation-direction（alternate为反向）
暂停动画：animation-play-state（paused为暂停，通常配合:hover使用）
多组动画
animation:动画1,动画2,动画n;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>逐帧多组动画</title><style>.box {width: 128px;height: 128px;/* border: 1px solid black; */background-image: url(../images/Jump.png);animation:/* 10：精灵小图的个数 */jump 1s steps(10) infinite,move 10s linear forwards;}@keyframes jump {/* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码 *//* from {background-position: 0 0;} */to {/* 精灵图的宽度 */background-position: -1280px 0;}}@keyframes move {/* from {transform: translateX(0);} */to {transform: translateX(800px);}}</style>
</head><body><div class="box"></div>
</body></html>
案例-走马灯
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>走马灯</title><style>/* 设置页面的默认边距和内边距为0 */* {margin: 0;padding: 0;}/* 移除列表项的默认样式，去掉默认的圆点标记 */li {list-style: none;}.box {width: 721.2px;height: 135.2px;border: 5px solid black;margin: 300px auto;overflow: hidden;}.box ul li img {height: 135.2px;width: 240.4px;}.box ul {width: 1923.2px;/* 设置动画效果：move，持续时间为5秒，线性过渡，无限循环播放 */animation: move 5s linear infinite;}/* 图片列表项样式，使图像以水平方向浮动排列 */.box ul li {float: left;}@keyframes move {to {/* 图片列表项向左平移1202px，实现走马灯效果 */transform: translateX(-1202px);}}/* 鼠标悬停时暂停动画 */.box:hover ul {animation-play-state: paused;}</style>
</head><body><div class="box"><ul><li><img src="../images/10.jpg" alt=""></li><li><img src="../images/11.jpg" alt=""></li><li><img src="../images/12.jpg" alt=""></li><li><img src="../images/13.jpg" alt=""></li><li><img src="../images/14.jpg" alt=""></li><li><img src="../images/10.jpg" alt=""></li><li><img src="../images/11.jpg" alt=""></li><li><img src="../images/12.jpg" alt=""></li></ul></div>
</body></html>
更多推荐
20231103
发布评论