星空粒子特效加代码雨加3d立方体

最新推荐文章于 2024-07-17 13:25:58 发布

mmo死神永生

最新推荐文章于 2024-07-17 13:25:58 发布

阅读量884

点赞数 25

文章标签： 3d css 前端

本文链接：https://blog.csdn.net/2401_82944012/article/details/140333367

版权

星空粒子特效加代码雨加3d立方体

前言
粒子特效
回顾
最后

前言

由于最近发现我自制的网页和别人的网页有亿点区别，我收scratch粒子特效的启迪，用html做了一个粒子特效

粒子特效

直接把代码贴这里了，我今天电脑的截屏功能出了点小问题，所以截不了图了。
代码：

<!DOCTYPE html>
<html>
<head>
  <title>document</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
      background: #000;
      background-size: cover;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    const width = window.innerWidth;
    const height = window.innerHeight;

    canvas.width = width;
    canvas.height = height;

    const particles = [];
    const connections = [];
    const particleCount = 300;
    const particleSpeed = 1;
    const particleSize = 2;
    const maxDistance = 100;
    const lightningColor = "#fff";

    class Particle {
      constructor() {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.color = "#fff";
        this.angle = Math.random() * 360;
        this.speed = Math.random() * particleSpeed;
        this.opacity = Math.random() * 0.5 + 0.5;
      }

      update() {
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;

        if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
          this.x = Math.random() * width;
          this.y = Math.random() * height;
        }
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
        ctx.fill();
      }
    }

    function createParticles() {
      for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle());
      }
    }

    function drawConnections() {
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x;
          const dy = particles[i].y - particles[j].y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          if (distance < maxDistance) {
            ctx.beginPath();
            ctx.moveTo(particles[i].x, particles[i].y);
            ctx.lineTo(particles[j].x, particles[j].y);
            ctx.strokeStyle = lightningColor;
            ctx.lineWidth = 0.2 * (1 - distance / maxDistance);
            ctx.stroke();
            ctx.closePath();
          }
        }
      }
    }

    function animate() {
      ctx.clearRect(0, 0, width, height);

      for (const particle of particles) {
        particle.update();
        particle.draw();
      }

      drawConnections();

      requestAnimationFrame(animate);
    }

    document.addEventListener("mousemove", (e) => {
      const mouseX = e.clientX;
      const mouseY = e.clientY;

      for (const particle of particles) {
        const dx = mouseX - particle.x;
        const dy = mouseY - particle.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < maxDistance) {
          particle.angle = Math.atan2(dy, dx);
          particle.speed = 5;
        } else {
          particle.speed = Math.random() * particleSpeed;
        }
      }
    });

    createParticles();
    animate();
  </script>
</body>
</html>

回顾

顺便回一下代码雨和立方体的功能：
立方体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #fff;
            background: rgba(255, 255, 255,0.75);
            color: #fff;
            font-size: 100px;
            line-height: 200px;
            text-align: center;
            position: absolute;
            transition: 2s;
        }
        body{
            perspective: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            height: 100vh;
        }
        .box:nth-of-type(1){transform: rotateY(90deg) translateZ(100px);}
        .box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
        .box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
        .box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
        .box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
        .box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
        .boxs{
            position: absolute;
            transform: rotateX(45deg) rotateY(45deg);
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            animation: go 3s infinite linear;
            animation-play-state: running;
        }
        @keyframes go{
            0%{transform: rotateX(0deg) rotateY(0deg);}
            100%{transform: rotateX(720deg) rotateY(360deg);}
        }
    </style>
</head>
<body>
    <div class="boxs">
        <div class="box first"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

最后代码雨：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
        
    </style>
</head>

<body>
<canvas id="myCanvas"></canvas>
<script>
    const width = document.getElementById("myCanvas").width = screen.availWidth;
    const height = document.getElementById("myCanvas").height = screen.availHeight;
    const ctx = document.getElementById("myCanvas").getContext("2d");
    const arr = Array(Math.ceil(width / 10)).fill(0);
    const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");

function rain() {
    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = "#0f0";
    arr.forEach(function (value, index) {
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
        arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
    });
}

setInterval(rain, 30);
</script>
</body>
</html>

都很Nice,让我们把这三段代码放在一起，由于某种原因，粒子特效的代码没放进去，最终代码长这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #fff;
            background: rgba(255, 255, 255,0.25);
            color: #fff;
            font-size: 100px;
            line-height: 200px;
            text-align: center;
            position: absolute;
            transition: 2s;
        }
        body{
            perspective: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            height: 100vh;
        }
        .box:nth-of-type(1){transform: rotateY(90deg) translateZ(100px);}
        .box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
        .box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
        .box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
        .box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
        .box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
        .boxs{
            position: absolute;
            transform: rotateX(45deg) rotateY(45deg);
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            animation: go 3s infinite linear;
            animation-play-state: running;
        }
        @keyframes go{
            0%{transform: rotateX(0deg) rotateY(0deg);}
            100%{transform: rotateX(180deg) rotateY(180deg);}
        }
    </style>
</head>
<body>
    <div class="boxs">
        <div class="box first"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <canvas id="myCanvas"></canvas>
    <script>
        const width = document.getElementById("myCanvas").width = screen.availWidth;
        const height = document.getElementById("myCanvas").height = screen.availHeight;
        const ctx = document.getElementById("myCanvas").getContext("2d");
        const arr = Array(Math.ceil(width / 10)).fill(0);
        const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
    
    function rain() {
        ctx.fillStyle = "rgba(0,0,0,0.05)";
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = "#0f0";
        arr.forEach(function (value, index) {
            ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
            arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
        });
    }
    
    setInterval(rain, 30);
    </script>
    
</body>

注意所有我的HTML代码都可以复制之后直接用，不用改其他的任何东西。看一下这段代码的效果：
在这里插入图片描述
还可以，但总觉的少了点什么。

最后

敬请期待！

mmo死神永生

关注

25
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
星空粒子特效加代码雨加3d立方体

星空粒子特效加代码雨加3d立方体前言粒子特效回顾最后前言由于最近发现我自制的网页和别人的网页有亿点区别，我收scratch粒子特效的启迪，用html做了一个粒子特效粒子特效直接把代码贴这里了，我今天电脑的截屏功能出了点小问题，所以截不了图了。代码：<!DOCTYPE html><html><head> <title>document</title> <style> body { margin:
复制链接

扫一扫