萧寂

Appearance

动画库demo ​

星球轨迹旋转效果 ​

image.png

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
            transform: rotate3d(1, 0, 0.2, 60deg); /* 60deg为3d旋转角度,0.2为向上倾斜角度 */
        }

        .father-1 {
            width: 50px;
            height: 50px;
            position: absolute;
            left: calc(50% - 25px);
            top: calc(50% - 25px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(72deg);
            animation: spin1 1s linear infinite;
        }

        .father-2 {
            width: 100px;
            height: 100px;
            position: absolute;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(144deg);
            animation: spin2 2s linear infinite;
        }

        .father-3 {
            width: 150px;
            height: 150px;
            position: absolute;
            left: calc(50% - 75px);
            top: calc(50% - 75px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(216deg);
            animation: spin3 3s linear infinite;
        }

        .father-4 {
            width: 200px;
            height: 200px;
            position: absolute;
            left: calc(50% - 100px);
            top: calc(50% - 100px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(288deg);
            animation: spin4 4s linear infinite;
        }

        .father-5 {
            width: 250px;
            height: 250px;
            position: absolute;
            left: calc(50% - 125px);
            top: calc(50% - 125px);
            border: 1px solid;
            border-radius: 50%;
            transform: rotate(360deg);
            animation: spin5 5s linear infinite;
        }

        .son {
            width: 10px;
            height: 10px;
            margin-left: -5px;
            margin-top: calc(50% - 5px);
            background-color: red;
            border-radius: 50%;
        }

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

            100% {
                /* 72deg + 360deg 下面也是同理 */
                transform: rotate(432deg); 
            }
        }

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

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

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

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

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

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

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

            100% {
                transform: rotate(720deg);
            }
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="father-1">
            <div class="son"></div>
        </div>
        <div class="father-2">
            <div class="son"></div>
        </div>
        <div class="father-3">
            <div class="son"></div>
        </div>
        <div class="father-4">
            <div class="son"></div>
        </div>
        <div class="father-5">
            <div class="son"></div>
        </div>
    </div>
</body>

</html>

星星闪烁效果(循环闪烁) ​

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .twinkle {
            width: 50px;
            height: 50px;
            background-color: blue;
            animation: twinkle 2s linear infinite;
        }

        @keyframes twinkle {
            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.2;
            }
        }
    </style>
</head>

<body>
    <div class="twinkle"></div>
</body>

</html>

左右摇摆效果(循环左右摇摆) ​

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 50px;
            height: 100px;
            background-color: blue;
            margin: 20px 20px;
        }
        /* 先右后左 */
        .rotate-right-left {
            animation: rotate-right-left 1.5s linear infinite;
        }

        /* 先左后右 */
        .rotate-left-right {
            animation: rotate-left-right 1.5s linear infinite;
        }

        /* 定义关键帧 */
        @keyframes rotate-right-left {

            0%,
            100% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(15deg);
            }

            50% {
                transform: rotate(0deg);
            }

            75% {
                transform: rotate(-15deg);
            }
        }

        /* 定义关键帧 */
        @keyframes rotate-left-right {

            0%,
            100% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(-15deg);
            }

            50% {
                transform: rotate(0deg);
            }

            75% {
                transform: rotate(15deg);
            }
        }
    </style>
</head>

<body>
    <div class="box rotate-right-left"></div>
    <div class="box rotate-left-right"></div>
</body>

</html>

一行一行文字每秒显示一行(逐渐显示) ​

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: blue;
        }
        /* 一个一个显示的,多个的,每次间隔一秒 */
        .fade {
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* 第一行文字动画，延迟0秒 */
        .fade:nth-child(1) {
            animation: fadeIn 1s ease-in-out forwards;
        }

        /* 第二行文字动画，延迟1秒 */
        .fade:nth-child(2) {
            animation: fadeIn 1s ease-in-out 1s forwards;
            /* 0 + 1s */
        }

        /* 第三行文字动画，延迟2秒 */
        .fade:nth-child(3) {
            animation: fadeIn 1s ease-in-out 2s forwards;
            /* 1 + 1s */
        }

        /* 还有多行的话往后面加,延迟的时间 = 前面动画总时间 + 1s */

        /* 动画名称 */
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="box fade">我是第一行文字</div>
    <div class="box fade">我是第二行文字</div>
    <div class="box fade">我是第三行文字</div>
</body>

</html>

无限旋转元素动画 ​

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: blue;
            width: 50px;
            height: 50px;
            animation: spin 5s linear infinite;
        }

        /* 定义旋转动画 */
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

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

</html>

反复上下移动元素 ​

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: blue;
            width: 50px;
            height: 50px;
            animation: moveUpDown 1.5s linear infinite;
        }

        @keyframes moveUpDown {
            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(20px);
                /* 向下移动20像素,支持百分比,rem等常用单位 */
            }
        }
    </style>
</head>

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

</html>

萧寂173专属博客，v1.0.0.4