loading.io CSS动画 --> 模仿记-原创手记-慕课网

cubic-bezier()

贝塞尔曲线坐标图

a. 下落的球

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pureCss</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 250px;
            height: 250px;
            border: 1px solid lightgray;
            margin-top: 20%;
            margin-left: 20%;
            padding-top: 20%;
            padding-left: 20%;
            /* background-color: #5f965f; */
            opacity: 0.5;
        }

        .box {
            width: 64px;
            height: 64px;
            position: relative;
            /* border: 1px solid lightgrey; */
            /* border: 1px solid lightgrey; */
        }

        .box div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            /* height: 50px; */
            position: absolute;
            bottom: 0;
            background-color: purple;
            animation: ball 1s linear infinite;
        }

        @keyframes ball {
            0%, 100% {
                animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55);
            }
            0% {
                transform: translateY(0);
                /* animation-timing-function: cubic-bezier(0, 0.25, 0.75, 0.9); */
            }
            50% {
                transform: translateY(70px);
                /* animation-timing-function: cubic-bezier(0, 0.2, 0.91, 0.38); */
                animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
            }
            100% {
                transform: translateY(0);
                /* animation-timing-function: cubic-bezier(0, 0.25, 0.75, 0.9); */
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div></div>
            <!-- <div></div>
            <div></div>
            <div></div>
            <div></div> -->
        </div>
    </div>
</body>

</html>
<!-- 在动画从 0% 50% 100% 每个阶段完成时都 设置不同 动画曲线 -->

b. 旋转缩放的小球

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pureCss</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 250px;
            height: 250px;
            border: 1px solid lightgray;
            margin-top: 20%;
            margin-left: 20%;
            padding-top: 20%;
            padding-left: 20%;
            /* background-color: #5f965f; */
            opacity: 0.5;
        }

        .box {
            width: 64px;
            height: 64px;
            position: relative;
            /* border: 1px solid lightgrey; */
            border: 1px solid lightgrey;
            animation: circle 4s linear infinite;
            transform-origin: 32px 32px;
            -webkit-transform-origin: 32px 32px;
        }

        .box div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            /* height: 50px; */
            position: absolute;
            /* bottom: 0; */
            /* background-color: purple; */
            /* animation: balls 1s linear infinite; */
        }

        .box div:nth-child(1) {
            top: -10px;
            left: 22px;
            background-color: red;
            animation: red 1s linear infinite;
        }

        .box div:nth-child(2) {
            top: 22px;
            left: -10px;
            background-color: purple;
            animation: purple 1s linear infinite;
        }

        .box div:nth-child(3) {
            top: 22px;
            left: 54px;
            background-color: pink;
            animation: pink 1s linear infinite;
        }

        .box div:nth-child(4) {
            top: 54px;
            left: 22px;
            background-color: yellowgreen;
            animation: yellowgreen 1s linear infinite;
        }

        .box div:nth-child(5) {
            top: 22px;
            left: 22px;
            background-color: blue;
            /* animation: blue 0.8s linear infinite; */
        }

        @keyframes red {
            0% {
                top: -10px;
                background-color: red;
            }
            50% {
                top: -16px;
                background-color: purple;
            }
            100% {
                top: -10px;
                background-color: red;
            }
        }

        @keyframes pink {
            0% {
                left: 54px;
                background-color: pink;
            }
            50% {
                left: 60px;
                background-color: purple;
            }
            100% {
                left: 54px;
                background-color: pink;
            }
        }

        @keyframes purple {
            0% {
                left: -10px;
                background-color: yellowgreen;
            }
            50% {
                left: -16px;
                background-color: purple;
            }
            100% {
                left: -10px;
                background-color: yellowgreen;
            }
        }

        @keyframes yellowgreen {
            0% {
                top: 54px;
                background-color: pink;
            }
            50% {
                top: 60px;
                background-color: purple;
            }
            100% {
                top: 54px;
                background-color: pink;
            }
        }

        @keyframes blue {
            0% {
                /* transform: scale(1); */
            }
            100% {
                /* transform: scale(1.2); */
            }
        }

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

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

            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>

<!-- note：旋转原点(transform-origin)的选择 -->

c. 音乐柱状图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pureCss</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 250px;
            height: 250px;
            border: 1px solid lightgray;
            margin-top: 20%;
            margin-left: 20%;
            padding-top: 20%;
            padding-left: 20%;
            /* background-color: #5f965f; */
            opacity: 0.5;
        }

        .box {
            width: 90px;
            height: 90px;
            position: relative;
            border: 1px solid lightgrey;
            /* animation: circle 4s linear infinite; */
            /* transform-origin: 32px 32px; */
            /* -webkit-transform-origin: 32px 32px; */
        }

        .box div {
            width: 10px;
            height: 30px;
            /* border-radius: 50%; */
            /* height: 50px; */
            position: absolute;
            bottom: 0;
            /* background-color: purple; */
            animation: rectangle 1s cubic-bezier(0, 0.2, 0.7, 0.2) infinite;
        }

        .box div:nth-child(1) {
            /* top: 15px; */
            left: 10px;
            background-color: red;
            animation-delay: -0.2s;
        }

        .box div:nth-child(2) {
            /* top: 22px; */
            left: 30px;
            background-color: purple;
            animation-delay: -0.4s;
        }

        .box div:nth-child(3) {
            /* top: 22px; */
            left: 50px;
            background-color: pink;
            animation-delay: -0.6s;
        }

        .box div:nth-child(4) {
            /* top: 54px; */
            left: 70px;
            background-color: yellowgreen;
            animation-delay: -0.8s;
        }

        @keyframes rectangle {
            0% {
                height: 30px;
            }
            25% {
                height: 70px;
            }
            50% {
                height: 90px;
            }
            75% {
                height: 70px;
            }
            100% {
                height: 30px;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>

<!-- note：height 变化方向的变化需要固定一个方向的位置，不同的执行动画时间与运动曲线 -->

d. 柱状图背景跑马灯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pureCss</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 250px;
            height: 250px;
            border: 1px solid lightgray;
            margin-top: 20%;
            margin-left: 20%;
            padding-top: 20%;
            padding-left: 20%;
            /* background-color: #5f965f; */
            opacity: 0.5;
        }

        .box {
            width: 90px;
            height: 90px;
            position: relative;
            border: 1px solid lightgrey;
            /* animation: circle 4s linear infinite; */
            /* transform-origin: 32px 32px; */
            /* -webkit-transform-origin: 32px 32px; */
        }

        .box div {
            width: 10px;
            height: 50px;
            /* border-radius: 50%; */
            /* height: 50px; */
            position: absolute;
            bottom: 0;
            /* opacity: 0.5; */
            /* background-color: purple; */
            animation: rectangle 1s linear infinite;
        }

        .box div:nth-child(1) {
            /* top: 15px; */
            left: 10px;
            background-color: red;
            animation-delay: -0.8s;
        }

        .box div:nth-child(2) {
            /* top: 22px; */
            left: 30px;
            background-color: purple;
            animation-delay: -0.6s;
        }

        .box div:nth-child(3) {
            /* top: 22px; */
            left: 50px;
            background-color: pink;
            animation-delay: -0.4s;
        }

        .box div:nth-child(4) {
            /* top: 54px; */
            left: 70px;
            background-color: yellowgreen;
            animation-delay: -0.2s;
        }

        @keyframes rectangle {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>

<!-- note：背景色变化的从 1 ==> 0.5 ==> 1 走完整个流程，与不同的执行动画开始时间 -->

e. 九宫格跑马灯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pureCss</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 250px;
            height: 250px;
            border: 1px solid lightgray;
            margin-top: 20%;
            margin-left: 20%;
            padding-top: 20%;
            padding-left: 20%;
            /* background-color: #5f965f; */
            opacity: 0.5;
        }

        .box {
            width: 51px;
            height: 51px;
            position: relative;
            border: 1px solid lightgrey;
            /* animation: circle 4s linear infinite; */
            /* transform-origin: 32px 32px; */
            /* -webkit-transform-origin: 32px 32px; */
        }

        .box div {
            width: 20px;
            height: 20px;
            /* border-radius: 50%; */
            /* height: 50px; */
            position: absolute;
            /* background-color: #45aee7; */
            /* bottom: 0; */
            /* opacity: 0.5; */
            background-color: yellow;
            text-align: center;
            animation: rectangle 1s linear infinite;
        }

        .box div:nth-child(1) {
            /* top: 15px; */
            /* left: 18px; */
            /* background-color: red; */
            animation-delay: 0s;
        }

        .box div:nth-child(2) {
            /* top: 22px; */
            left: 23px;
            /* background-color: purple; */
            animation-delay: 0.125s;
        }

        .box div:nth-child(3) {
            /* top: 36px; */
            left: 46px;
            /* background-color: pink; */
            animation-delay: 0.25s;
        }

        .box div:nth-child(4) {
            top: 23px;
            /* left: 18px; */
            /* background-color: yellowgreen; */
            animation-delay: 0.875s;
        }

        .box div:nth-child(5) {
            top: 23px;
            left: 46px;
            /* background-color: yellowgreen; */

            animation-delay: 0.375s;
        }

        .box div:nth-child(6) {
            top: 46px;
            /* left: 36px; */
            /* background-color: yellowgreen; */
            animation-delay: 0.75s;
        }

        .box div:nth-child(7) {
            top: 46px;
            left: 23px;
            /* background-color: yellowgreen; */

            animation-delay: 0.625s;
        }

        .box div:nth-child(8) {
            top: 46px;
            left: 46px;
            /* background-color: yellowgreen; */

            animation-delay: 0.5s;
        }

        @keyframes rectangle {
            0% {
                background-color: purple;
            }
            100% {
                background-color: yellow;
            }
            /* 0% {
                background: #45aee7;
            }
            12.5% {
                background: #45aee7;
            }
            12.625% {
                background: #0055a5;
            }
            100% {
                background: #0055a5;
            } */
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

</html>

<!-- note：背景色变化顺序(延迟执行时间) 与 排列顺序要相对应 -->

f. 四宫格小砖块运动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pureCss</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 250px;
            height: 250px;
            border: 1px solid lightgray;
            margin-top: 20%;
            margin-left: 20%;
            padding-top: 20%;
            padding-left: 20%;
            /* background-color: #5f965f; */
            opacity: 0.5;
        }

        .box {
            width: 45px;
            height: 45px;
            position: relative;
            border: 1px solid lightgrey;
            /* animation: circle 4s linear infinite; */
            /* transform-origin: 32px 32px; */
            /* -webkit-transform-origin: 32px 32px; */
        }

        .box div {
            width: 20px;
            height: 20px;
            /* border-radius: 50%; */
            /* height: 50px; */
            position: absolute;
            /* background-color: #45aee7; */
            /* bottom: 0; */
            /* opacity: 0.5; */
            /* background-color: yellow; */
            text-align: center;
            /* animation: rectangle 1s linear infinite; */
        }

        .box div:nth-child(1) {
            /* top: 15px; */
            /* left: 18px; */
            background-color: red;
            /* animation-delay: 0s; */
            animation: red 2s linear infinite;
        }

        @keyframes red {
            0% {
                top: 0;
                left: 0;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            25% {
                top: 0;
                left: 25px;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            50% {
                top: 25px;
                left: 25px;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            75% {
                top: 25px;
                left: 0;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            100% {
                top: 0;
                left: 0;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
        }

        .box div:nth-child(2) {
            width: 0;
            height: 0;
            background-color: white;
        }

        .box div:nth-child(3) {
            top: 25px;
            left: 25px;
            background-color: pink;
            animation-delay: 4s;
            animation: pink 2s linear infinite;
        }

        @keyframes pink {
            0% {
                top: 25px;
                left: 25px;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            25% {
                top: 25px;
                left: 0;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            50% {
                top: 0;
                left: 0;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            75% {
                top: 0;
                left: 25px;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            100% {
                top: 25px;
                left: 25px;
            }
        }

        .box div:nth-child(4) {
            top: 25px;
            left: 0;
            background-color: yellow;
            animation-delay: 2s;
            animation: yellow 2s linear infinite;
        }

        @keyframes yellow {
            0% {
                top: 25px;
                left: 0;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            25% {
                top: 0;
                left: 0;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            50% {
                top: 0;
                left: 25px;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            75% {
                top: 25px;
                left: 25px;
                animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
            }
            100% {
                top: 25px;
                left: 0;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div>1</div>
            <div></div>
            <div>3</div>
            <div>4</div> 
        </div>
    </div>
</body>

</html>

<!-- note：运动轨迹运行的太过平滑，希望高手可以改善改善 -->

g. 四宫格心跳

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pureCss</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 250px;
            height: 250px;
            border: 1px solid lightgray;
            margin-top: 20%;
            margin-left: 20%;
            padding-top: 20%;
            padding-left: 20%;
            /* background-color: #5f965f; */
            opacity: 0.5;
        }

        .box {
            width: 45px;
            height: 45px;
            position: relative;
            border: 1px solid lightgrey;
            /* animation: circle 4s linear infinite; */
            /* transform-origin: 32px 32px; */
            /* -webkit-transform-origin: 32px 32px; */
        }

        .box div {
            width: 20px;
            height: 20px;
            /* border-radius: 50%; */
            /* height: 50px; */
            position: absolute;
            /* background-color: #45aee7; */
            /* bottom: 0; */
            /* opacity: 0.5; */
            /* background-color: yellow; */
            text-align: center;
            animation: bricks 1s cubic-bezier(0.33, 0.01, 0.99, 0.17) infinite;
        }

        .box div:nth-child(1) {
            /* top: 15px; */
            /* left: 18px; */
            background-color: red;
            animation-delay: 0s;
            /* animation: red 1s linear infinite; */
        }

        .box div:nth-child(2) {
            top: 0;
            left: 35px;
            background-color: purple;
            animation-delay: 0.3s;
        }

        .box div:nth-child(3) {
            top: 35px;
            left: 35px;
            background-color: pink;
            animation-delay: 0.7s;
            /* animation: pink 2s linear infinite; */
        }

        .box div:nth-child(4) {
            top: 35px;
            left: 0;
            background-color: yellow;
            animation-delay: 0.3s;
            /* animation: yellow 2s linear infinite; */
        }

        @keyframes bricks {
            0% {
                transform: scale(1.5);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.5);
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </div>
</body>

</html>

<!-- note：在于对动画的速度曲线(cubic-bezier)上的改变: 是先快后慢，还是先慢后快，来模拟现实物理运动的轨迹 -->

h. 光盘旋转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pureCss</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 250px;
            height: 250px;
            border: 1px solid lightgray;
            margin-top: 20%;
            margin-left: 20%;
            padding-top: 20%;
            padding-left: 20%;
            /* background-color: #5f965f; */
            opacity: 0.5;
        }

        .box {
            width: 64px;
            height: 64px;
            position: relative;
            border: 1px solid lightgrey;
            /* animation: circle 4s linear infinite; */
            /* transform-origin: 32px 32px; */
            /* -webkit-transform-origin: 32px 32px; */
        }

        .box div {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            top: 7px;
            left: 7px;
            background-color: red;
            /* bottom: 0; */
            /* opacity: 0.5; */
            /* background-color: yellow; */
            text-align: center;
            /* animation: bricks 1s cubic-bezier(0.33, 0.01, 0.99, 0.17) infinite; */
            animation: disk 1s linear infinite;
        }

        .box div::after {
            content: "";
            height: 15px;
            width: 15px;
            border-radius: 50%;
            background-color: #f3e3e5;
            position: absolute;
            /* transform-origin: ; */
        }

        @keyframes disk {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(90deg);
            }
            50% {
                transform: rotate(180deg);
            }
            75% {
                transform: rotate(270deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div></div>
        </div>
    </div>
</body>

</html>

<!-- note：伪元素目前绑定 animation 无效 -->

loading.io CSS动画 --> 模仿记原创