动画 css动画

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)
    }
}