文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

circular

发布于 2023-08-19 19:14:40 字数 2132 浏览 0 评论 0 收藏 0

circular-2elements

<style>
    @keyframes spin {
        to {
            transform: rotate(1turn);
        }

    }

    .avatar {
        animation: spin 6s infinite linear;
        transform-origin: 50% 150px; /* 150px = the radius of path */
    }

    .avatar > img {
        animation: inherit;
        animation-direction: reverse;
    }

    /*below is just styling*/
    .avatar {
        width: 48px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
    }

    .avatar > img {
        display: block;
        width: inherit;
    }

    .path {
        width: 300px;
        height: 300px;
        padding: 20px;
        border-radius: 50%;
        background: yellow;
    }

</style>
<body>
<div class="path">
    <div class="avatar">
        <img src="52-circular/wdpm.jpg"/>
    </div>
</div>
</body>

circular

<style>

    @keyframes spin {
        from {
            transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn)
        }
        to {
            transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn);
        }
    }

    .avatar {
        animation: spin 6s infinite linear;
    }

    /* Anything below this is just styling */

    .path {
        width: 300px;
        height: 300px;
        padding: 20px;
        margin: 100px auto;
        border-radius: 50%;
        background: #fb3;
    }

    .avatar {
        display: block;
        width: 50px;
        margin: calc(50% - 25px) auto 0;
        border-radius: 50%;
        overflow: hidden;
    }

    .avatar > img {
        width: inherit;
    }

</style>
<body>
<div class="path">
    <div class="avatar">
        <img src="52-circular/wdpm.jpg"/>
    </div>
</div>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

circular

circular-2elements

circular

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。