首页 > 代码库 > css3 animation 实现环形路径平移动画

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

2024-08-20 18:39:02   221人阅读

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

 

技术分享

 

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


联系
我们