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>