C3动画

1. 霓虹灯效果
   

 <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .light-btn {
      /* 多重投影 */
      color: aqua;
      width: 200px;
      height: 80px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 2. animation  调用动画 
                light-btn-shadow     调用动画名称
                2s                   动画时长
                infinite             动画播放次数(无限次)
                alternate            正反正交替播放
        */
      animation: light-btn-shadow 2s infinite alternate;
    }

    /* 1. 定义动画名称 */
    @keyframes light-btn-shadow {
      100% {
        color: #000;
        background-color: aqua;
        box-shadow:
          0px 0px 200px 0px aqua,
          0px 0px 50px 0px aqua,
          0px 0px 25px 0px aqua,
          0px 0px 5px 0px aqua;
      }
    }
  </style>


<div class="light-btn">霓虹灯按钮</div>

2. 逐帧动画
   

 <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
      }
      body {
        /* vh  =    1vh 视口高度的 1% ,  viewport height 视口高度  */
        /* vw  =    1vw 视口宽度的 1% ,  viewport width 视口宽度  */
        height: 100vh;
        background: url(./west_image/west_bg.jpg) no-repeat center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .west01 {
        width: 200px;
        height: 180px;
        background: url(./west_image/west_01.png) no-repeat;
        /* 
          steps(8)     逐帧动画(画面数量)
          infinite     无限播放次数
        */
        /* 调用动画 */
        animation: walk 1s steps(8) infinite; 
      }

      /* 定义动画 */
      @keyframes walk {
        100% {
          /* x 轴坐标 = -图片宽度即可 */
          background-position-x: -1600px;
        }
      }
    </style>


<div class="west01"></div>

逐帧动画素材:https://download.csdn.net/download/l13640698113/18357143

3.华为充电效果

 <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    body {
      background-color: #000;
    }

    .circle {
      width: 80vw;
      height: 80vw;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 定位居中 */
      position: absolute;
      bottom: 45vh;
      /* 🎉 calc()计算函数：实现水平居中 定位50% - 宽度的一半 */
      left: calc(50% - 80vw / 2);
    }

    /* 电量百分比 */
    .percentage {
      width: 80vw;
      height: 80vw;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 45vh;
      left: calc(50% - 80vw / 2);
      color: #fff;
      font-size: 10vw;
      z-index: 1;
    }

    /* 通过样式创建一个绿色盒子 */
    .circle::before {
      content: '';
      position: absolute;
      width: 56vw;
      /* 65vw = 65% * 375px = 243.75px  */
      height: 56vw;
      background-color: #00fe00;
      /* 🎉 border-radius 边框圆角: 不规则的圆 */
      border-radius: 45% 45% 45% 45%/ 42% 38% 62% 49%;
      /* 调用动画 */
      animation: circle-rotate 10s infinite linear;
    }

    /* 通过样式创建一个菏泽盒子 */
    .circle::after {
      content: '';
      position: absolute;
      width: 50vw;
      height: 50vw;
      background-color: #000;
      /* border-radius 边框圆角：规则的正圆 */
      border-radius: 50%;
    }

    /* 定义动画 */
    @keyframes circle-rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    /* 
        🧨 融合效果两个属性：
          父盒子设置对比度
            filter: contrast();
          子盒子设置模糊
            filter: blur();
       */

    /* 融合效果步骤1：设置对比度 */
    .saturate {
      width: 100vw;
      height: 100vh;
      background-color: #000;
      display: flex;
      justify-content: center;
      position: relative;
      /* 父盒子设置：对比度 */
      filter: contrast(10);
    }

    .bubble-group {
      /* 融合效果步骤2：设置模糊 */
      filter: blur(2vw);
      position: absolute;

      bottom: 0;
      left: calc(50% - 40vw / 2);

      width: 40vw;
      height: 10vw;
      border-radius: 30vw 30vw 0 0;
      background-color: #00fe00;
    }

    .bubble {
      width: 16vw;
      height: 16vw;
      background-color: #00ff00;
      border-radius: 50%;
      position: absolute;
      bottom: 0;
      left: calc(50% - 13vw);
      animation: move-top 2s infinite;
    }

    .circle {
      filter: blur(2vw);
    }

    @keyframes move-top {
      100% {
        bottom: 50vh;
      }
    }

    .bubble:nth-child(1) {
      left: 13vw;
      width: 11vw;
      height: 11vw;
      animation: move-top 5s ease-in-out -1.667s infinite;
    }

    .bubble:nth-child(2) {
      left: 10vw;
      width: 11vw;
      height: 11vw;
      animation: move-top 8s ease-in-out -1.336s infinite;
    }

    .bubble:nth-child(3) {
      left: 14vw;
      width: 6vw;
      height: 6vw;
      animation: move-top 9s ease-in-out -1.262s infinite;
    }

    .bubble:nth-child(4) {
      left: 10vw;
      width: 8vw;
      height: 8vw;
      animation: move-top 5s ease-in-out -2.513s infinite;
    }

    .bubble:nth-child(5) {
      left: 13vw;
      width: 8vw;
      height: 8vw;
      animation: move-top 7s ease-in-out -1.161s infinite;
    }

    .bubble:nth-child(6) {
      left: 15vw;
      width: 6vw;
      height: 6vw;
      animation: move-top 8s ease-in-out -1.064s infinite;
    }

    .bubble:nth-child(7) {
      left: 11vw;
      width: 8vw;
      height: 8vw;
      animation: move-top 7s ease-in-out -3.333s infinite;
    }

    .bubble:nth-child(8) {
      left: 9vw;
      width: 6vw;
      height: 6vw;
      animation: move-top 7s ease-in-out -1.479s infinite;
    }

    .bubble:nth-child(9) {
      left: 10vw;
      width: 7vw;
      height: 7vw;
      animation: move-top 7s ease-in-out -2.683s infinite;
    }

    .bubble:nth-child(10) {
      left: 14vw;
      width: 8vw;
      height: 8vw;
      animation: move-top 4s ease-in-out -5.678s infinite;
    }

    .bubble:nth-child(11) {
      left: 6vw;
      width: 10vw;
      height: 10vw;
      animation: move-top 4s ease-in-out -1.37s infinite;
    }

    .bubble:nth-child(12) {
      left: 15vw;
      width: 10vw;
      height: 10vw;
      animation: move-top 6s ease-in-out -1.208s infinite;
    }

    .bubble:nth-child(13) {
      left: 11vw;
      width: 10vw;
      height: 10vw;
      animation: move-top 6s ease-in-out -3.306s infinite;
    }

    .bubble:nth-child(14) {
      left: 11vw;
      width: 8vw;
      height: 8vw;
      animation: move-top 6s ease-in-out -1.753s infinite;
    }

    .bubble:nth-child(15) {
      left: 9vw;
      width: 6vw;
      height: 6vw;
      animation: move-top 4s ease-in-out -4.43s infinite;
    }
  </style>


<!-- 百分比盒子 -->
  <div class="percentage">96.5%</div>
  <div class="saturate">
    <!-- 电量圆圈 -->
    <div class="circle"></div>
    <!-- 充电口底座 -->
    <div class="bubble-group">
      <!-- 泡泡 -->
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
    </div>
  </div>

  <script>
    let number = 0
    const percentage = document.querySelector('.percentage')
    let timeid = setInterval(() => {
      number += Math.random() * 10
      if (number >= 100) {
        number = 100;
        clearInterval(timeid)
      }
      percentage.innerHTML = number.toFixed(1) + '%';

      console.log(number)
    }, 200)
  </script>

利用scss循环生成15个泡泡的css

// @for $i from 1 through 15   => 从 1 变到 15
@for $i from 1 through 15 {
  // #{$i}   插值   1~15
  .bubble:nth-child(#{$i}) {
    //left: #{5 + 随机的1~10的数}vw;   
    // 随机生成： 6~15vw
    left: #{5 + random(10)}vw;
    // $size 定义变量: #{5 + 随机的1~6的数}vw;   
    // 随机生成： 6~11vw
    $size: #{5 + random(6)}vw;
    // 因为需要正方形，所以宽高尺寸一样
    width: $size;
    height: $size;
    // 调用动画 
    //    4~9s   动画时长
    //    1~5s   动画延时   
    animation: move-top #{3 + random(6)}s ease-in-out -#{random(5000) / 1000 + 1}s infinite;
  }
}

4.B站点赞效果

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .container {
            height: 100vh;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            flex-direction: column;
        }

        .item {
            color: #707070;
            width: 112.5px;
            height: 112.5px;
            font-size: 112.5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 小点点 */
        .dot-group {
            position: absolute;
            width: 150px;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            animation: fire-show 0.5s 3s forwards;
        }

        .dot {
            width: 150px;
            position: absolute;
            display: flex;
            justify-content: space-between;
        }

        .dot::before,
        .dot::after {
            content: '';
            width: 12px;
            height: 6px;
            border-radius: 12px;
            background-color: #00a1d6;
        }

        .dot:nth-child(1) {
            transform: rotate(calc(22.5deg * 1));
        }

        .dot:nth-child(2) {
            transform: rotate(calc(22.5deg * 3));
        }

        .dot:nth-child(3) {
            transform: rotate(calc(22.5deg * 5));
        }

        .dot:nth-child(4) {
            transform: rotate(calc(22.5deg * 7));
        }

        /* 大点点 */
        .big-dot-group {
            position: absolute;
            width: 187.5px;
            height: 187.5px;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            animation: fire-show 1.2s 3s forwards;
        }

        .big-dot {
            width: inherit;
            position: absolute;
            display: flex;
            justify-content: space-between;
        }

        .big-dot::before,
        .big-dot::after {
            content: '';
            width: 22.5px;
            height: 11.25px;
            border-radius: 9.375px;
            background-color: #00a1d6;
        }

        .big-dot:nth-child(1) {
            transform: rotate(calc(22.5deg * 2));
        }

        .big-dot:nth-child(2) {
            transform: rotate(calc(22.5deg * 4));
        }

        .big-dot:nth-child(3) {
            transform: rotate(calc(22.5deg * 6));
        }

        .big-dot:nth-child(4) {
            transform: rotate(calc(22.5deg * 8));
        }


        .circle-svg {
            width: 150px;
            height: 150px;
            position: absolute;
            border-radius: 50%;
            animation: circleMove 0.5s 2s forwards;
        }

        @keyframes iconShake {

            0%,
            100% {
                transform: translate(0, 0)
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translate(-2px, -2px)
            }

            20%,
            40%,
            60%,
            80% {
                transform: translate(2px, 2px)
            }
        }

        @keyframes iconScale {
            100% {
                transform: scale(1.2)
            }
        }

        @keyframes iconColor {
            100% {
                color: #00a1d6
            }
        }

        @keyframes circleMove {

            0%,
            100% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        @keyframes fire-show {
            0% {
                transform: scale(0);
                opacity: 0;
            }

            10% {
                opacity: 0;
            }

            70% {
                transform: scale(0.9);
                opacity: 1;
            }

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

        .vanfont {
            animation: iconShake 0.2s 0s 10 linear, iconScale 0.5s 2.5s forwards, iconColor 0.5s 2.5s forwards;
        }
    </style>

 <div class="container">
        <!-- 点赞 -->
        <div class="item">
            <!-- 点赞图标 -->
            <span class="van-icon-videodetails_like vanfont"></span>
            <!-- 圆 -->
            <svg class="circle-svg" width="150" height="150" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150" preserveAspectRatio="xMidYMid">
                <circle cx="75" cy="75" r="73" fill="none" stroke="#00a1d6" stroke-width="2" stroke-dasharray="0 1000"
                    stroke-linecap="round" style="transform-origin: center; transform: rotate(-90deg)">
                    <animate fill="freeze" attributeName="stroke-dasharray" from="0 1000" to="460 1000" dur="2s"
                        repeatCount="1" />
                </circle>
            </svg>
            <!-- 小烟花 -->
            <div class="dot-group">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <!-- 大烟花 -->
            <div class="big-dot-group">
                <div class="big-dot"></div>
                <div class="big-dot"></div>
                <div class="big-dot"></div>
                <div class="big-dot"></div>
            </div>
        </div>
    </div>