css3 animation 實現環形路徑平移動畫

本文轉載自查看原文 2016-11-14 08:59 3536 JavaScript / jQuery

注意 @keyframes to/from 的學習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<style>
    /* 順時針自轉 */
    @keyframes spin {
        to {
            transform: rotate(1turn);
        }
    }


     /* 逆時針自轉 */    
    @keyframes spin-reverse {    
        from {
            transform: rotate(1turn);
        }
    }

    /* 這是一坨自暴自棄的樣式 */
    .basic{
        border:3px solid orange; 
        height: 150px;
        width:150px;
        border-radius:50%;
        margin:50px;
    }

    
    /*
        順時針自轉，同時該元素下所有的子元素也會一起旋轉起來
    */
    .avatar{

        /* 
            linear : 從頭到尾速度是相同的;
            infinite：無限輪播
         */
        animation: spin 10s infinite linear;  
        

    }

    /*
        逆時針旋轉“自轉”，與“公轉”導致的旋轉相抵消。形成一種不動的錯覺
    */
    .avatar > img {
        
        animation:spin-reverse 10s infinite linear;
    }


</style>


<div class="basic avatar">
    <img src="github.png" alt="">
</div>

</body>
</html>

免責聲明！

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

猜您在找 css3 animation實現逐幀動畫 CSS3(4)---動畫(animation) CSS3動畫之animation屬性 css3動畫 keyframe animation animation CSS3動畫總結 CSS3 -- 動畫animation可以多次點擊 CSS3 動畫Animation的8大屬性 Css3動畫-@keyframes與animation css3 animation動畫使用學習CSS3動畫（animation）