html的动画还是比较强大的,纯css就可以写出来不错的动画效果
效果图:https://wuyanzhi.gitee.io/ratotar/
代码:
html:
<div class="boss">
<div class="common one" title="我是1号"></div>
<div class="common two" title="我是2号"></div>
<div class="common three" title="我是3号"></div>
<div class="common four" title="我是4号"></div>
<div class="common five" title="我是5号"></div>
<div class="common six" title="我是6号"></div>
</div>
css:
html,body{
height: 100%;
width: 100%;
background: linear-gradient(rgb(73, 72, 72),#555,#696868,rgb(129, 129, 129),rgb(158, 157, 157),rgb(129, 129, 129),#696868,#555,rgb(73, 72, 72));
/* background: radial-gradient(circle,#555,#000,#000); */
perspective:700px;
overflow:hidden;
}
.boss{
height: 100%;
width: 100%;
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style: preserve-3d;
/* 动画名称 周期 无限 线性 */
animation: rotateMyse 5s infinite linear;
-webkit-animation: rotateMyse 5s infinite linear;
-moz-animation: rotateMyse 5s infinite linear;
-ms-animation: rotateMyse 5s infinite linear;
}
.common{
position: absolute;
top: 50%;
left: 50%;
width: 160px;
height: 160px;
margin-left: -80px;
margin-top: -80px;
}
.one{
background-image: url("../img/1.jpg");
transform: rotateY(0deg) translateZ(160px);
}
.two{
background-image: url("../img/2.jpg");
transform:rotateY(60deg) translateZ(160px);
}
.three{
background-image: url("../img/3.jpg");
transform: rotateY(120deg) translateZ(160px);
}
.four{
background-image: url("../img/4.jpg");
transform: rotateY(180deg) translateZ(160px)
}
.five{
background-image: url("../img/5.jpg");
transform: rotateY(240deg) translateZ(160px)
}
.six{
background-image: url("../img/6.jpg");
transform: rotateY(300deg) translateZ(160px)
}
@keyframes rotateMyse{
0%{
transform: rotateY(0deg)
}
100%{
transform: rotateY(360deg)
}
}