CSS动画
1.CSS动画的实现方式？
CSS动画类型：
1. transition补间动画
- 位置-平移： left/right/margin/transform
- 方位-旋转: transform
- 大小-缩放： transform
- 透明度： opacity
- 线性变换： transform
2. keyframe关键帧动画
3. 逐帧动画
2.过渡动画和关键帧动画的区别？
- 过度动画需要有状态的变化
- 关键帧动画不需要状态的变化
- 关键帧动画的控制更加精细
3.如何实现逐帧动画？
/*逐帧动画（关键帧动画的一种特殊情形）*/
/* 1. 适用于无法补间的动画
2. 猎豹奔跑的过程中实际上是有补间的
3. 使用steps(1)去掉补间
4. 资源较大
*/
.container-every-frame {
/*1的含义：这里需要设置每一个区间之间只有一个动画，那么就不会有补间了*/
animation-timing-function: steps(1);
}4.CSS动画的性能怎么样？
- 性能不坏
- 部分情况下优于JS
- JS可以做到更好
- 部分高危属性：box-shadow(阴影效果的实现会消耗性能)
5.使用CSS3动画实现一个轮播图效果？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮换</title>
<style type="text/css">
div,img{
margin: 0;
padding: 0;
}
.div_first{
width: 1000px;
height: 300px;
margin-top: 100px;
margin-left: 250px;
overflow: hidden;
}
.div_second{
width: 4000px;
position: relative;
animation: myimg 12s linear infinite normal;
}
@keyframes myimg{
0{
left: 0;
}
5%{
left: 0;
}
30%{
left: -1000px;
}
35%{
left: -1000px;
}
60%{
left: -2000px;
}
65%{
left: -2000px;
}
95%{
left: -3000px;
}
100%{
left: -3000px;
}
}
</style>
</head>
<body>
<div class="div_first">
<div class="div_second">
<img src="../../img/风景1.jpg" alt="">
<img src="../../img/风景1.jpg" alt="">
<img src="../../img/风景1.jpg" alt="">
<img src="../../img/风景1.jpg" alt="">
</div>
</div>
</body>
</html>
评论
填写昵称与邮箱即可评论，无需登录。