css 图片旋转

这里我用了border来代替图片

.ta_c{
margin:auto;border:1px solid red;width:150px;height:150px;border-radius: 10px;}

@-webkit-keyframes circle{
0% {-webkit-transform: rotate(0deg);} //如果需要调整旋转的方向 自行添加代码
100% {-webkit-transform: rotate(360deg);}
}
// 慢速转动
.ta_c{
    -webkit-transform: rotate(360deg);
    animation: circle 3s linear infinite;
    -moz-animation: circle 3s linear infinite;
    -webkit-animation: circle 3s linear infinite;
    -o-animation: circle 3s linear infinite;

}

//这个是快速旋转 

/*       .ta_c {
        animation:circle 1s infinite linear;
        }
        @-webkit-keyframes circle{
        0%{ transform:rotate(0deg); }
        100%{ transform:rotate(-360deg); }
        }*/


<div class="ta_c" style="margin-top: 150px;"></div>


猜你喜欢

转载自blog.csdn.net/qq_36591333/article/details/80078844