码迷,mamicode.com
首页 > 其他好文 > 详细

h5旋转效果

时间:2017-06-16 10:25:35      阅读:405      评论:0      收藏:0      [点我收藏+]

标签:linear   class   width   pre   blog   infinite   near   anim   frame   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #img{

            width:200px;
            height:200px;
            border:100px solid green;
            border-left-color: red;
            border-right-color: black;
            border-top-color: yellow;
            margin:100px;
            border-radius:50%;
            -webkit-animation:circle 1s infinite linear;
            -moz-animation:circle 1s infinite linear;
        }
        @-webkit-keyframes circle{
            0%{ transform:rotate(0deg); }
            100%{ transform:rotate(-360deg); }
        }
        @-moz-keyframes circle{
            0%{ transform:rotate(0deg); }
            100%{ transform:rotate(-360deg); }
        }

    </style>

</head>
<body>
<div id="img"></div>
</body>
</html>

  

h5旋转效果

标签:linear   class   width   pre   blog   infinite   near   anim   frame   

原文地址:http://www.cnblogs.com/wangbenqing/p/7025779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!