[log]css圆周动画实现

逃离我推掉我的手 2021-09-17 00:16 412阅读 0赞

# 前言 #

创建动画就是把在时间轴上规定好每一帧的效果,然后进行播放就形成了动画,这就是我理解的动画

# keyframes #

@keyframes 就是每一帧的效果 从0 到100 就是整个时间轴

> [http://www.w3school.com.cn/cssref/pr\_keyframes.asp][http_www.w3school.com.cn_cssref_pr_keyframes.asp]

@keyframes animationname  {  keyframes-selector { css-styles;}   }

*  animationname 动画名称
 *  keyframes-selector 0 - 100
 *  css-styles 样式

# animation #

将动画和div进行绑定

animation: name duration timing-function delay iteration-count direction;

*  name 动画名称
 *  duration 动画时长
 *  timing-function 动画速度  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70]
 *  delay 开始前的延迟
 *  iteration-count 播放次数
    
     *  infinite 无限次播放
 *  direction 是否反向播放
    
     *  alternate 反向轮流播放

# 圆环动画 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 1]

@keyframes animX{ 
            0% {  left: 0px; }
            100% {  left: 300px; }
        }
        @keyframes animY{ 
            0% { top: 0px;}
            100% { top: 300px;}
        }
        @keyframes scale { 
            0% { 
                /*transform: scale(0.7)*/
            }
            50% { 
                /*transform: scale(1)*/
            }
            100% { 
                /*transform: scale(0.7)*/
            }
        }
    
    
        .ball { 
            width: 100px;
            height: 100px;
            background-color: #f66;
            border-radius: 50%;
            position: absolute;
            color:#fff;
            font-size:22px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
    
        .ball1 { 
            animation:
                    animX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
                    animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
                    scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    
        }

# css 圆周运动 #

围绕原心旋转

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 2]

*  用到的参数
    
     *  alternate : 因为该动画顺时针重复播放
     *  infinite:参考ball1 , 使用延时,避免从圆环的外边开始转动
     *  cubic-bezier: 使用贝塞尔曲线,进行匀速的转动,(对于交互的研究欠缺就不说了)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css"> @keyframes animX { 0% { margin-left: 0px; } 100% { margin-left: 400px; } } @keyframes animY { 0% { margin-top: 0px; } 100% { margin-top: 400px; } } /*自传*/ @keyframes test { to { transform: rotate(1turn); } } .ball { width: 100px; height: 100px; background-color: #d87c7c; border-radius: 50%; position: absolute; font-size: 12px; color: #ffffff; display: flex; align-items: center; justify-content: center; } .ball1 { background-color: #d7ab82; /*从 0，0 到 400，400 的 一条直线*/ animation: /* 动画名称 耗时 速度 延迟 无限播放 轮流反向播放*/ animX 10s cubic-bezier(0.36, 0, 0.64, 1) infinite , animY 10s cubic-bezier(0.36, 0, 0.64, 1) infinite ; } .ball2 { background-color: #6e7074; animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) 1s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) 1s infinite alternate ; } .ball3 { background-color: #61a0a8; /* 顺时针 从x轴的0 出来，*/ animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) 5s infinite alternate; } .ball4 { /* 逆时针 */ background-color: #efa18d; animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) 5s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate ; } .ball5 { /* 在4 的基础上 顺时针 不从0 出来 */ background-color: #1d8ce0; animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate, /* -10 左下角*/ animY 10s cubic-bezier(0.36, 0, 0.64, 1) -7s infinite alternate ; } .ball6 { /* 在4 的基础上 顺时针 不从0 出来 */ background-color: #2a72d6; animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate , animY 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate; } .ball7 { /* 在3 的基础上 顺时针 不从0 出来 */ background-color: #3dd678; animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate , animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; } .ball8 { /* 在3 的基础上 顺时针 不从0 出来 */ background-color: #28d6a5; animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate , animY 10s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate; } /*.ball4 {*/ /*background-color: #efa18d;*/ /*!*顺时针*!*/ /*animation:*/ /*animX 10s cubic-bezier(0.36, 0, 0.64, 1) -13.571s infinite alternate,*/ /*animY 10s cubic-bezier(0.36, 0, 0.64, 1) -8.571s infinite alternate ;*/ /*}*/ /*.ball5 {*/ /*background-color: #787464;*/ /*animation:*/ /*animX 10s cubic-bezier(0.36, 0, 0.64, 1) -16.428s infinite alternate,*/ /*animY 10s cubic-bezier(0.36, 0, 0.64, 1) -11.428s infinite alternate ;*/ /*}*/ #lopp { width: 500px; height: 500px; border-radius: 50%; background-color: #cc7e63; } body{ height: 100vh; margin: 0; padding: 0; display: flex; } .page{ width: 1300px; height: 700px; min-width: 1300px; min-height: 700px; background-color: #724e58; margin: auto auto; display: flex; align-items: center; justify-content: center; } </style>
    </head>
    
    <body>
    
    <div class="page">
        <div id="lopp">
            
            
            <div class="ball ball3">3</div>
            <div class="ball ball4">4</div>
            <div class="ball ball5">5</div>
            <div class="ball ball6">6</div>
            <div class="ball ball7">7</div>
            <div class="ball ball8">8</div>
        </div>
    </div>
    
    
    
    <script type="text/javascript"> </script>
    </body>
    </html>

*  工具

直观的看到贝塞尔曲线运动的效果  
[http://cubic-bezier.com/\#.36,0,.64,1][http_cubic-bezier.com_.36_0_.64_1]  
使用google 浏览器 也可以看到

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 3]

--------------------

感谢 @北京-前端-狂热者 大佬给的提示和帮助

[http_www.w3school.com.cn_cssref_pr_keyframes.asp]: http://www.w3school.com.cn/cssref/pr_keyframes.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70]: /images/20210813/7a3a875dac374adbbd3e6af93a506e55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 1]: /images/20210813/2a659f7f758d48518af2824b639d1db7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 2]: /images/20210813/fe99eddb72e74715ad8b1961f2c29714.png
[http_cubic-bezier.com_.36_0_.64_1]: http://cubic-bezier.com/#.36,0,.64,1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2phdmFfc3BhcnJvdw_size_16_color_FFFFFF_t_70 3]: /images/20210813/d91086373baa434a90c64c5d99b82226.png