一个2024年新年快乐的前端代码_新年快乐代码特效2024

作者：繁依Fanyi0 | 2024-02-16 19:59:00

踩

新年快乐代码特效2024


<!DOCTYPE html>
<html>
<head>
  <style>
    #new-year-animation {
      position: relative;
      width: 600px;
      height: 400px;
      background-color: black;
      color: white;
      font-size: 40px;
      text-align: center;
      padding-top: 200px;
    }
    #new-year-animation span {
      position: absolute;
      animation: fly 2s linear infinite;
    }
    @keyframes fly {
      0% { top: 0px; left: 0px; }
      50% { top: -200px; left: 400px; }
      100% { top: 0px; left: 800px; }
    }
  </style>
</head>
<body>
  <div id="new-year-animation">
    <span>H</span>
    <span>A</span>
    <span>P</span>
    <span>P</span>
    <span>Y</span>
    <span> </span>
    <span>N</span>
    <span>E</span>
    <span>W</span>
    <span> </span>
    <span>Y</span>
    <span>E</span>
    <span>A</span>
    <span>R</span>
    <span>!</span>
  </div>
 
  <script>
    function showAnimation() {
      let spans = document.querySelectorAll('#new-year-animation span');
      spans.forEach((span, index) => {
        setTimeout(() => {
          span.style.display = 'inline';
        }, index * 100);
      });
    }
    showAnimation();
  </script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/96389