css3 animation 实现环形路径平移动画

 注意 @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>

 

 

posted @ 2016-11-14 08:59  贝尔塔猫  阅读(4502)  评论(0)  编辑  收藏  举报