css效果实现一个物体的旋转小demo

来源：互联网发布：搜房网网络摇号直播间编辑：程序博客网时间：2024/04/29 17:32

定一个html中的一个元素，然后使用下面的效果即可

.img{

                width:200px;

                height:200px;

                border:100px solid green;

                border-left-color: red;

                border-right-color: black;

                border-top-color: yellow;

                margin:100px;

                background:url(img/banner_03.png);

                -webkit-animation:circle 1s infinite linear;/*匀速 循环*/

                animation:circle 1s infinite linear;/*匀速 循环   这句话和下面的 @keyframe控制的是在ie内核的浏览器下让其能够旋转 */

}

           @keyframes circle{

                0%{transform:rotate(0deg);}

                100%{transform:rotate(-360deg);}

}

            @-webkit-keyframes circle{

                0%{transform:rotate(0deg);}

                100%{transform:rotate(-360deg);}

}

<html>

<body>

<div class="img"></div>

</body>

</html>

阅读全文

0 0