h5旋转效果

<!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>

posted @ 2017-06-16 08:58 土上方方阅读(4892) 评论(0) 收藏举报

刷新页面返回顶部