您的位置：首页 > Web前端 > CSS

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

2017-11-26 22:41 399 查看

定一个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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航