动画库demo

萧寂173
39 阅读7分钟

星球轨迹旋转效果

image.png

代码

<!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>

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

<!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>

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

<!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>

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

<!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>

无限旋转元素动画

<!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>

反复上下移动元素

<!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>

卡片从背面沿Y轴翻转到正面的效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flip Animation</title>
<style>
  @keyframes flip {
    from {
      transform: rotateY(-180deg);
    }
    to {
      transform: rotateY(0deg);
    }
  }

  .flipper {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: flip 5s forwards;
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
  }
</style>
</head>
<body>

<div class="flipper">111</div>

</body>
</html>

心跳放大缩小动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heartbeat Animation</title>
<style>
  @keyframes heartbeat {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }

  .heartbeat {
    border-radius: 50%; /* 使元素呈现为圆形 */
    animation: heartbeat 1s infinite; /* 设置动画 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: 400px;
    height: 400px;
    font-size: 100px;
    font-weight: bold;
  }
</style>
</head>
<body>

<div class="heartbeat">❤️</div>

</body>
</html>

元素从0-1.2-1之间的缩放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .text-gradient {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        margin-left: 100px;
        background-color: pink;
        animation: scaleAnimation 2s ease-in-out;
    }
    	/* 定义动画 */
	@keyframes scaleAnimation {
	    0% {
	        transform: scale(0); /* 初始状态，缩放到0 */
	    }
	    50% {
	        transform: scale(1.2); /* 中间状态，缩放到1.2 */
	    }
	    100% {
	        transform: scale(1); /* 最终状态，缩放回1 */
	    }
	}
  </style>
</head>
<body>
<div class="text-gradient"></div>
</body>
</html>

沿元素中心y轴左右旋转至慢慢停下带渐显效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swing and Fade Animation</title>
    <style>
        @keyframes swingAndFadeIn {
            0% {
                transform: rotateY(0deg);
                opacity: 0;
            }

            12.5% {
                transform: rotateY(-90deg);
                opacity: 0.125;
            }

            25% {
                transform: rotateY(0deg);
                opacity: 0.25;
            }

            37.5% {
                transform: rotateY(70deg);
                opacity: 0.375;
            }

            50% {
                transform: rotateY(0deg);
                opacity: 0.5;
            }

            62.5% {
                transform: rotateY(-50deg);
                opacity: 0.625;
            }

            75% {
                transform: rotateY(0deg);
                opacity: 0.75;
            }

            87.5% {
                transform: rotateY(20deg);
                opacity: 0.875;
            }

            100% {
                transform: rotateY(0deg);
                opacity: 1;
            }
        }

        .animated-element {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: center;
            /* 设置动画的中心点 */
            animation: swingAndFadeIn 4s ease-in-out;
        }
    </style>
</head>

<body>

    <div class="animated-element"></div>

</body>

</html>

椭圆轨迹运动示例代码

image.png

<!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>
        /* 元素从X轴0px到500px之间的动画 */
        @keyframes animX {
            0% {
                left: 35px;  /* (100 - 正方形的宽) / 2 */
            }

            100% {
                left: 535px; /* lopp椭圆轨迹的宽 + (100 - 正方形的宽) / 2 */
            }
        }
        /* 元素从Y轴0px到300px之间的动画 */
        @keyframes animY {
            0% {
                top: 35px; /* (100 - 正方形的高) / 2 */
            }

            100% {
                top: 335px; /* lopp椭圆轨迹的高 + (100 - 正方形的宽) / 2 */
            }
        }
        /* 缩放动画,根据需要看要不要缩放 */
        @keyframes scale {
            0% {
                transform: scale(0.7);
            }

            50% {
                transform: scale(1);
            }

            100% {
                transform: scale(0.7);
            }
        }
        /* 每个元素初始样式 */
        .ball {
            width: 30px;
            height: 30px;
            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;
        }
        .ball2 {
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -7.857s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -2.857s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -2.857s infinite alternate;
        }
        .ball3 {
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -10.714s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -5.714s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -5.714s infinite alternate;
        }

        .ball4 {
            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, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -8.571s infinite alternate;
        }

        .ball5 {
            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, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -11.428s infinite alternate;
        }

        .ball6 {
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -19.285s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -14.285s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -14.285s infinite alternate;
        }

        .ball7 {
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -22.142s infinite alternate, animY 10s cubic-bezier(0.36, 0, 0.64, 1) -17.142s infinite alternate, scale 20s cubic-bezier(0.36, 0, 0.64, 1) -17.142s infinite alternate;
        }

        #lopp {
            width: 500px;
            height: 300px;
            border: 2px solid #999;
            border-radius: 50%;
            position: absolute;
            left: 50px; /* 小球的初始左边距离+小球宽度的一半 */
            top: 50px; /* 小球的初始上边距离+小球宽度的一半 */
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="lopp"></div>
    <div class="ball ball1">1</div>
    <div class="ball ball2">2</div>
    <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>
</body>

</html>
avatar
文章
阅读
粉丝