CSS3动画animation+@keyframes的使用
代码:
- CSS
body,
html,
div,
ul,
li {
margin: 0;
padding: 0;
}
section {
position: relative;
perspective: 1600px;
border: 1px solid #000;
margin: 0 auto;
width: 300px;
height: 300px;
}
.box {
height: 300px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
width: 300px;
transition: 10s;
animation: move 20s infinite linear; /*动画的名称、执行完成用时、循环播放、线性过度 */
}
@keyframes move{
0%{transform:rotateY(0deg)}
20%{transform:rotate3d(1,0,0,300deg)}
40%{transform:rotate3d(0,1,1,600deg)}
60%{transform:rotate3d(1,0,1,900deg)}
80%{transform:rotate3d(0,0,1,180deg)}
100%{transform:rotate3d(1,1,0,270deg)}
}
.box>li {
width: 300px;
height: 300px;
list-style: none;
text-align: center;
line-height: 300px;
font-size: 30px;
position: absolute;
}
.box>li>img {
width: 300px;
height: 300px;
}
.one {
background: rgba(255, 0, 5, 0.3);
transform: translateZ(150px);
}
.two {
background: rgba(220, 104, 44, 0.3);
transform: rotateY(90deg) translateZ(150px);
}
.three {
background: rgba(255, 239, 0, 0.3);
transform: translateZ(-150px) rotate(180deg);
}
.four {
background: rgba(86, 255, 0, 0.3);
transform: rotateY(-90deg) translateZ(150px);
}
.five {
background: rgba(0, 76, 255, 0.3);
transform: rotateX(90deg) translateZ(150px);
}
.six {
background: rgba(168, 0, 255, 0.3);
transform: rotateX(-90deg) translateZ(150px);
}
- HTML
<section>
<ul class="box">
<li class="one"><img src="./img/img1.jpg" alt=""></li>
<li class="two"><img src="./img/img2.jpg" alt=""></li>
<li class="three"><img src="./img/img3.jpg" alt=""></li>
<li class="four"><img src="./img/img4.jpg" alt=""></li>
<li class="five"><img src="./img/img5.jpg" alt=""></li>
<li class="six"><img src="./img/img6.jpg" alt=""></li>
</ul>
</section>
- 效果
可以自行设置动画的时间、运行轨迹等,主要实现的属性 :animation+@keyframes