❤️创意网页：文字和祝福语：创意的粒子效果网页(❤️好看好用❤️)HTML+CSS+JS

命运之光

发布于 2024-03-20 12:20:58

1350

发布于 2024-03-20 12:20:58

文章被收录于专栏：我在本科期间写的文章

文字和祝福语是我们日常生活中表达情感和传递祝福的重要方式。为了让这些文字和祝福语更加生动和有趣，我设计了一个创意的网页，通过动态效果和互动性，为用户带来与众不同的体验。

简介

🌌在这个创意网页项目中，我致力于创造一个独特而引人入胜的方式来展示文字和祝福语。通过精心设计的背景效果、动态文字展示和用户互动功能，这个网页将吸引用户的注意力，增强他们与文字之间的情感联系。

图片展示

视频展示

https://live.csdn.net/v/embed/310480

文字和祝福语：创意的粒子效果网页

网页效果

🌌网页采用了现代和简洁的设计风格，背景以黑色和深灰色渐变为基调，营造出一种神秘而庄重的氛围。页面的核心是一个具有动态效果的文字容器，让用户可以输入他们想要传达的祝福语，并以独特的方式呈现出来。 🌌当用户输入祝福语后，网页会以淡入的动画效果展示出来，文字会以醒目的字体和阴影呈现，使其更加突出和引人注目。同时，网页背景还采用了创意的粒子效果，这些粒子以随机的颜色和速度在页面中漂浮，为整个网页增添了动感和趣味。

互动功能

🌌为了增加用户的参与度和互动性，网页还提供了输入框和发送按钮。用户可以在输入框中自由输入他们的祝福语，并通过点击发送按钮来展示它。这种互动的设计使用户感到他们的祝福语得到了重视和呈现，增加了与网页的情感连接。 🌌此外，用户还可以多次输入不同的祝福语，每次发送后，文字容器会重新显示新的祝福语，并伴随动画效果，让用户体验到与祝福语一起成长和变化的乐趣。

项目源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字和祝福语</title>
  <style>
    /* 粒子效果容器 */
    #particle-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
background: linear-gradient(#000000, #333333); /* 添加渐变效果 */
    }

    /* 文字样式 */
    #text-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    #text {
      color: white;
      font-size: 48px;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
      opacity: 0;
      animation: fade-in 3s ease-in-out forwards;
    }

    /* 输入框样式 */
    #input-container {
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    #input-text {
      font-size: 24px;
      padding: 8px;
    }

    #submit-button {
      font-size: 24px;
      padding: 8px 16px;
      margin-top: 8px;
    }

    /* 动画效果 */
    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
  </style>
</head>
<body>
  <div id="particle-container">
    <canvas id="particle-canvas"></canvas>
  </div>
  <div id="text-container">
    <h1 id="text">祝福语</h1>
  </div>
  <div id="input-container">
    <input type="text" id="input-text" placeholder="输入你的祝福话语">
    <br>
    <button id="submit-button">发送祝福</button>
  </div>

  <script>
    // 生成粒子效果
    function createParticles() {
      const particleContainer = document.getElementById('particle-container');
      const canvas = document.getElementById('particle-canvas');
      const context = canvas.getContext('2d');
      const particles = [];

      // 设置画布大小为容器大小
      canvas.width = particleContainer.clientWidth;
      canvas.height = particleContainer.clientHeight;

      // 创建粒子对象
      function Particle(x, y, radius, color, speedX, speedY) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.speedX = speedX;
        this.speedY = speedY;
      }

      // 更新粒子位置
      Particle.prototype.update = function() {
        this.x += this.speedX;
        this.y += this.speedY;

        // 边界检测，使粒子在画布内移动
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
          this.speedX = -this.speedX;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
          this.speedY = -this.speedY;
        }
      };

      // 绘制粒子
      Particle.prototype.draw = function() {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        context.fillStyle = this.color;
        context.fill();
      };

      // 生成随机颜色
      function randomColor() {
        const colors = ['#FF6138', '#FFBE53', '#2980B9', '#282741', '#F7FD04'];
        return colors[Math.floor(Math.random() * colors.length)];
      }

      // 生成随机速度
      function randomSpeed() {
        return (Math.random() - 0.5) * 2; // 随机速度范围为-1到1之间
      }

      // 创建粒子并添加到数组中
      for (let i = 0; i < 100; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * 3 + 1;
        const color = randomColor();
        const speedX = randomSpeed();
        const speedY = randomSpeed();

        const particle = new Particle(x, y, radius, color, speedX, speedY);
        particles.push(particle);
      }

      // 动画循环
      function animateParticles() {
        // 清空画布
        context.clearRect(0, 0, canvas.width, canvas.height);

        // 更新和绘制粒子
        for (let i = 0; i < particles.length; i++) {
          particles[i].update();
          particles[i].draw();
        }

        // 循环调用动画函数
        requestAnimationFrame(animateParticles);
      }

      // 开始动画
      animateParticles();
    }

    // 页面加载完成后执行
    window.addEventListener('load', () => {
      createParticles();
    });

    // 监听发送祝福按钮点击事件
    const submitButton = document.getElementById('submit-button');
    submitButton.addEventListener('click', () => {
      const inputText = document.getElementById('input-text').value;
      showBlessing(inputText);
    });

    // 显示祝福
    function showBlessing(blessing) {
      const textContainer = document.getElementById('text-container');
      const textElement = document.getElementById('text');
      textElement.innerText = blessing;

      textContainer.style.opacity = '1';
      textContainer.style.animation = 'none';

      setTimeout(() => {
        textContainer.style.opacity = '0';
        textContainer.style.animation = 'fade-in 3s ease-in-out forwards';
      }, 3000);
    }
  </script>
</body>
</html>

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

🌌这个创意的文字和祝福语网页为用户提供了一种独特和有趣的方式来表达情感和传递祝福。通过动态的文字效果和创意的背景粒子效果，网页为用户带来了视觉上的享受和互动上的参与。不论是庆祝节日、送上生日祝福，还是表达对亲朋好友的祝福，这个网页都能给用户带来愉悦和满足的体验。 🌌让我们一起用文字和祝福语创造美好的时刻吧！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-07-17，如有侵权请联系 cloudcommunity@tencent.com 删除

html