十分钟实现节日祝福动画，CSS+JavaScript实现元旦祝福动画，祝大家元旦快乐

Myth丶恋晨 2023-01-01 07:49 114阅读 0赞

# 视频 #

### 视频地址：[https://www.bilibili.com/video/BV1v54y1t7zn][https_www.bilibili.com_video_BV1v54y1t7zn] ###

十分钟实现元旦祝福动画，CSS+JavaScript实现节日祝福动画，祝大家元旦快乐

> 视频已同步到我的B站账号欢迎大家关注。  
> [https://space.bilibili.com/563010186][https_space.bilibili.com_563010186]

# **参考代码** #

## **HTML:** ##

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>元旦快乐:公众号AlbertYang</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <p>
          <div class="box">
            <dic class="circle">
              <div class="text">
                <span style="--x:0">元</span>
                <span style="--x:1">旦</span>
                <br />
                <span style="--x:2">快</span>
                <span style="--x:3">乐</span>
              </div>
            </dic>
          </div>
        </p>
        <script>
          const bubbles = () => {
            let count = 300;
            let p = document.querySelector("p");
            for (let i = 0; i < count; i++) {
              let bubble = document.createElement('i');
              let x = Math.floor(Math.random() * window.innerWidth);
              y = Math.floor(Math.random() * window.innerHeight);
    
    
              let size = Math.random() * 60;
              bubble.style.left = x + 'px';
              bubble.style.top = y + 'px';
              bubble.style.width = size + 'px';
              bubble.style.height = size + 'px';
              bubble.style.animationDuration = 5 + size + 's';
              bubble.style.animationDelay = -size + 's';
    
    
              p.appendChild(bubble);
            }
          }
          bubbles()
    </script>
      </body>
    </html>

## **CSS:** ##

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    
    body {
      overflow: hidden;
    }
    
    
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f1f1f1;
    }
    
    
    p .box {
      position: absolute;
      width: 450px;
      height: 450px;
    }
    
    
    p .box .circle {
      position: relative;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #fff, #e4e3e8);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }
    
    
    p .box .circle::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 5px;
      right: 5px;
      bottom: 5px;
      background: linear-gradient(315deg, #fff, #e4e3e8);
      border-radius: 50%;
      z-index: 1;
    }
    
    
    p .text {
      position: absolute;
      font-size: 6em;
      color: #ff2a2a;
      z-index: 2;
    }
    
    
    p .text span {
      display: inline-block;
      animation: blink 3s 2s infinite;
      animation-delay: calc(var(--x) * 0.5s);
    }
    
    
    p i {
      position: absolute;
      background: #FF2A2A;
      border-radius: 50%;
      animation: animate linear infinite;
    }
    
    
    p i:nth-child(even) {
      background: transparent;
      border: 1px solid #FF2A2A;
    }
    
    
    @keyframes animate {
      0% {
        transform: translateY(0);
        opacity: 0;
        filter: hue-rotate(0deg);
      }
    
    
      10%,
      90% {
        opacity: 1;
      }
    
    
      100% {
        transform: translateY(-3000%);
        opacity: 0;
        filter: hue-rotate(36000deg);
      }
    }
    
    
    @keyframes blink {
      0% {
        transform: scale(0);
        opacity: 0;
        filter: hue-rotate(0deg);
      }
    
    
      30%,
      50%,
      80% {
        transform: scale(1.3);
        opacity: 1;
      }
    
    
      100% {
        transform: scale(0);
        opacity: 0;
        filter: hue-rotate(3600deg);
      }
    }

![de5bd36dfdddc3ba19086a5b531999c2.gif][]

今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。**如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！**

[https_www.bilibili.com_video_BV1v54y1t7zn]: https://www.bilibili.com/video/BV1v54y1t7zn
[https_space.bilibili.com_563010186]: https://space.bilibili.com/563010186
[de5bd36dfdddc3ba19086a5b531999c2.gif]: /images/20221120/1abf3e2bd53c468e9c5d240f0d93d470.png