网站:https://openmao.panchuang.net/

跟其他ChatGPT网站没有什么区别,目前还是免费用的。

下面是网站简单些写的HTML5代码

好的,以下是一份简单的樱花飘落的页面示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>樱花飘落</title>
    <style type="text/css">
      body {
        background-color: #F5DEB3;
        margin: 0;
        padding: 0;
      }

      .petals {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #FFF0F5;
        box-shadow: 0 0 3px #FF69B4;
        animation: petals-fall linear infinite;
        transform-origin: top center;
      }

      @keyframes petals-fall {
        0% {
          transform: translate(0, -100px) rotate(0deg);
          opacity: 1;
        }
        100% {
          transform: translate(calc(100vw * var(--x)), calc(100vh * var(--y))) rotate(360deg);
          opacity: 0;
        }
      }
    </style>
  </head>

  <body>
    <!-- 樱花花瓣 -->
    <div class="petals"></div>

    <script type="text/javascript">
      // 创建樱花花瓣
      function createPetals() {
        const petal = document.createElement('div');
        petal.className = 'petals';
        petal.style.setProperty('--x', Math.random());
        petal.style.setProperty('--y', Math.random());
        petal.style.left = Math.random() * window.innerWidth + 'px';
        document.body.appendChild(petal);
        setTimeout(() => {
          petal.remove();
        }, 10000);
      }

      // 定时创建樱花花瓣
      setInterval(createPetals, 100);
    </script>
  </body>
</html>

代码解释:

  1. 首先定义了页面的样式,设置了背景色和宽高等。
  2. 接着定义了樱花花瓣的样式,包括大小、颜色、阴影、动画等。动画通过 keyframes 定义了花瓣从上往下落下的过程。transform 属性实现了花瓣的平移和旋转效果。
  3. 在页面中添加一个空的 <div> 元素,用来放置樱花花瓣。在 JavaScript 中,通过 createElement 方法创建樱花花瓣元素,并设置其类名和样式属性,然后将其添加到页面中。每隔一定时间就创建新的花瓣,同时删除已经飘落到底部的花瓣,以避免占用过多内存。

注意:这只是一个简单的示例,实现效果和性能可能不够优化,可以根据需要进行调整和改进。