旋轉跑動效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>旋轉跑動效果</title>
        <style>
            #CD{
            width: 800px;
            height: 800px;
            background-color: #7FFF00;
            margin: 50px auto;
            border-radius: 50%;
            text-align: center;
            line-height: 300px;
            color: fuchsia;
            font-size: 40px;
            /*控制次數*/
            /*animation: name 2s 2;
            -webkit-animation: name 2s 2;*/
            /*交替*/
            /*animation: name 2s 2 alternate;
            -webkit-animation: name 2s 2 alternate;*/
            /*一直旋轉*/
            animation: name 2s infinite linear;
            -webkit-animation: name 2s infinite linear;
        }
        /*#mydiv{
            width: 50px;
            height: 50px;
            background-color: lightseagreen;
            position: relative;
            animation: myname 3s;
            -webkit-animation: myname 3s;
        }
        @keyframes myname{
            0{
                top: 40px;
                left: 30px;
                background-color: khaki;
            }
            30%{
                top: 40px;
                left: 30px;
                background-color: khaki;
            }
            60%{
                top: 83px;
                left: 70px;
                background-color:chartreuse;
            }
            100%{
                top: 830px;
                left: 330px;
                background-color: orange;
            }
        }*/
        @keyframes name{
            from{
                transform: rotate(0);
            }
            to{transform: rotate(360deg);}
        }   
        /*@keyframes name{
            0%{}
            20%{}
            40%{}
            80%{}
            100%{}
            }*/
        @-moz-keyframes name{
            from{
                transform:rotate(0) ;
            }
            to{ transform: rotate(360deg);}
        }
        </style>
    </head>
    <body>
        <div id="CD">HELLO</div>
        <div id="mydiv">TEXT</div>
    </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章