抓住毕业会的尾巴，用星空特效去表白你的女神吧！

电玩女神 2022-10-09 12:28 154阅读 0赞

> 毕业会已经面临结束了，赶快行动起来吧  
> 不要让自己留下遗憾，感觉动起来抓紧表白，否则哭都没地方哭  
> 表白才会有结果，不然永远没有结果  
> 你缺的不是同学，而是一个相爱的人，要万一他也喜欢你，就等着你说出这句话呢

[特效地址点击即可查看][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center]

html代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>星空表白</title>
      <link rel="stylesheet" href="./index.css">
    </head>
    
    <body>
      <div class="loveY">
        <span>我</span>
        <span>爱</span>
        <span>你</span>
        <span>X</span>
        <span>X</span>
        <span>X</span>
        <span>女</span>
        <span>神</span>
      </div>
      <div class="header">
        <canvas id="canvas">
        </canvas>
      </div>
    </body>
    <script src="./index.js"></script>
    
    </html>

css代码：

body { 
      background: black;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    
    .header { 
      margin: 0 auto;
      width: 100%;
      height: 100%;
      background-color: #000;
      position: relative;
    }
    
    .loveY { 
      width: 800px;
      position: fixed;
      color: red;
      top: 45%;
      left: 40%;
      font-size: 50px;
      z-index: 999;
    }
    
    .loveY span { 
      animation: Confession 4s linear infinite;
    }
    
    .loveY span:nth-child(1) { 
      animation-delay: 0s;
    }
    
    .loveY span:nth-child(2) { 
      animation-delay: 0.4s;
    }
    
    .loveY span:nth-child(3) { 
      animation-delay: 0.8s;
    }
    
    .loveY span:nth-child(4) { 
      animation-delay: 1.2s;
    }
    
    .loveY span:nth-child(5) { 
      animation-delay: 1.6s;
    }
    
    .loveY span:nth-child(6) { 
      animation-delay: 2s;
    }
    
    .loveY span:nth-child(7) { 
      animation-delay: 2.4s;
    }
    
    .loveY span:nth-child(8) { 
      animation-delay: 2.8s;
    }
    
    @keyframes Confession { 
      0% { 
        text-shadow: blue;
      }
    
      50% { 
        text-shadow: red;
      }
    
      100% { 
        text-shadow: red;
      }
    
      50% { 
        color: transparent;
      }
    
      0% { 
        text-shadow: blue;
      }
    }

js代码：

[Link 1]: https://vkceyugu.cdn.bspapp.com/VKCEYUGU-21ff4d64-d0c4-4228-80d5-f183d5384a63/a8892a04-1950-48a3-9c31-7757d8f0a1fd.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/7d1cb28504d44445895d02e82005adaf.png