纯css3实现不规则圆形动效纯css3实现不规则圆形动效 animation的使用 animation-directio

纯css3实现不规则圆形动效

animation的使用

animation-direction的四个值
1.normal：默认值，不进行反方向播放；
2.reverse：全部播放都是用反方向播放；
3.alternate：在奇数次数（1、3、5）的时候正向播放，偶数次数（2、4、6）进行反向播放；
4.alternate-reverse：在偶数次数（1、3、5）的时候正向播放，奇数次数（2、4、6）进行反向播放；

`animation-timing-function`属性（时间曲线）

`animation-timing-function`属性是为动画制定从开始到结束时的播放速度曲线，比如由快到慢，或者由慢到快等；

animation-timing-function的几个值
1.linear：表示动画一直以匀速进行播放；贝赛尔函数cubic-bezier(0,0,0.25,1)
2.ease：默认值，表示动画先慢后快，在即将结束时再变慢；cubic-bezier(0.25,0.1,0.25,1)
3.ease-in：动画由慢到快直至结束；cubic-bezier(0.42,0,1,1)
4.ease-out：动画由快到慢直至结束；cubic-bezier(0,0,0.58,1)
5.ease-in-out：动画由慢到快再到慢直至结束，与ease不同的是它均等得分为三份，而ease是只在结束时变慢；cubic-bezier(0.42,0,0.58,1)
6.标注时间：也可以直接标注一个时间(以s做单位)来规定动画全称以该速度进行播放；
7.贝赛尔函数：也可以使用贝赛尔函数来对动画的播放时间曲线进行规定；

截屏2022-04-11 上午12.32.30.png 代码附上：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>不规则圆形动效</title>
    <style>
        body {
            margin: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #060c21;
        }

        .box {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            /* border: 2px solid #fff; */
        }

        .box1 {
            position: absolute;
            width: 80%;
            height: 80%;
            border-radius: 70% 70% 80% 90%;
            border: 2px solid green;
            animation: box1Move 1s linear infinite;
        }

        .box2 {

            position: absolute;
            width: 70%;
            height: 70%;
            border-radius: 80% 90% 70% 80%;
            border: 2px solid skyblue;
            animation: box2Move 1s linear infinite;
        }

        .box3 {
            position: absolute;
            width: 90%;
            height: 90%;
            border-radius: 80% 80% 70% 90%;
            border: 2px solid red;
            animation: box3Move 0.6s linear infinite;
        }

        .box h1 {

            color: #fff;

        }

        @keyframes box1Move {
            0% {
                transform: rotate(0deg);
            }

            20% {
                transform: rotate(120deg);
            }

            60% {
                transform: rotate(240deg);
            }

            100% {
                transform: rotate(300deg);
            }
        }

        @keyframes box2Move {
            0% {
                transform: rotate(0deg);
            }

            20% {
                transform: rotate(100deg);
            }

            60% {
                transform: rotate(200deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes box3Move {
            0% {
                transform: rotate(0deg);
            }


            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <h1>loading</h1>
    </div>
    </body>

</html>

纯css3实现不规则圆形动效

纯css3实现不规则圆形动效

animation的使用

animation-timing-function属性（时间曲线）

`animation-timing-function`属性（时间曲线）