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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM