HTML炫酷粒子源代码

最新推荐文章于 2024-01-18 17:53:26 发布
最新推荐文章于 2024-01-18 17:53:26 发布
阅读量1.5w 收藏 56
点赞数 14
分类专栏： 趣味代码 文章标签： javascript css html

HTML炫酷粒子源代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>H5,200行代码实现粒子漩涡特效</title>
    <style>
        html,body{
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
            background: #000000;
        }
        #canvas{
            position:absolute;
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    function project3D(x,y,z,vars){
        var p,d;
        x-=vars.camX;
        y-=vars.camY-8;
        z-=vars.camZ;
        p=Math.atan2(x,z);
        d=Math.sqrt(x*x+z*z);
        x=Math.sin(p-vars.yaw)*d;
        z=Math.cos(p-vars.yaw)*d;
        p=Math.atan2(y,z);
        d=Math.sqrt(y*y+z*z);
        y=Math.sin(p-vars.pitch)*d;
        z=Math.cos(p-vars.pitch)*d;
        var rx1=-1000;
        var ry1=1;
        var rx2=1000;
        var ry2=1;
        var rx3=0;
        var ry3=0;
        var rx4=x;
        var ry4=z;
        var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
        var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
        var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
        if(!z)z=0.000000001;
        if(ua>0&&ua<1&&ub>0&&ub<1){
            return {
                x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,
                y:vars.cy+y/z*vars.scale,
                d:(x*x+y*y+z*z)
            };
        }else{
            return { d:-1 };
        }
    }
    function elevation(x,y,z){
        var dist = Math.sqrt(x*x+y*y+z*z);
        if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);
        return 0.00000001;
    }
    function rgb(col){
        col += 0.000001;
        var r = parseInt((0.5+Math.sin(col)*0.5)*16);
        var g = parseInt((0.5+Math.cos(col)*0.5)*16);
        var b = parseInt((0.5-Math.sin(col)*0.5)*16);
        return "#"+r.toString(16)+g.toString(16)+b.toString(16);
    }
    function interpolateColors(RGB1,RGB2,degree){
        var w2=degree;
        var w1=1-w2;
        return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];
    }
    function rgbArray(col){
        col += 0.000001;
        var r = parseInt((0.5+Math.sin(col)*0.5)*256);
        var g = parseInt((0.5+Math.cos(col)*0.5)*256);
        var b = parseInt((0.5-Math.sin(col)*0.5)*256);
        return [r, g, b];
    }
    function colorString(arr){
        var r = parseInt(arr[0]);
        var g = parseInt(arr[1]);
        var b = parseInt(arr[2]);
        return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);
    }
    function process(vars){
        if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars);
        var p,d,t;
        p = Math.atan2(vars.camX, vars.camZ);
        d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
        d -= Math.sin(vars.frameNo / 80) / 25;
        t = Math.cos(vars.frameNo / 300) / 165;
        vars.camX = Math.sin(p + t) * d;
        vars.camZ = Math.cos(p + t) * d;
        vars.camY = -Math.sin(vars.frameNo / 220) * 15;
        vars.yaw = Math.PI + p + t;
        vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
        var t;
        for(var i=0;i<vars.points.length;++i){
            x=vars.points[i].x;
            y=vars.points[i].y;
            z=vars.points[i].z;
            d=Math.sqrt(x*x+z*z)/1.0075;
            t=.1/(1+d*d/5);
            p=Math.atan2(x,z)+t;
            vars.points[i].x=Math.sin(p)*d;
            vars.points[i].z=Math.cos(p)*d;
            vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);
            if(vars.points[i].y>vars.vortexHeight/2 || d<.25){
                vars.points.splice(i,1);
                spawnParticle(vars);
            }
        }
    }
    function drawFloor(vars){
        var x,y,z,d,point,a;
        for (var i = -25; i <= 25; i += 1) {
            for (var j = -25; j <= 25; j += 1) {
                x = i*2;
                z = j*2;
                y = vars.floor;
                d = Math.sqrt(x * x + z * z);
                point = project3D(x, y-d*d/85, z, vars);
                if (point.d != -1) {
                    size = 1 + 15000 / (1 + point.d);
                    a = 0.15 - Math.pow(d / 50, 4) * 0.15;
                    if (a > 0) {
                        vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));
                        vars.ctx.globalAlpha = a;
                        vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
                    }
                }
            }
        }
        vars.ctx.fillStyle = "#82f";
        for (var i = -25; i <= 25; i += 1) {
            for (var j = -25; j <= 25; j += 1) {
                x = i*2;
                z = j*2;
                y = -vars.floor;
                d = Math.sqrt(x * x + z * z);
                point = project3D(x, y+d*d/85, z, vars);
                if (point.d != -1) {
                    size = 1 + 15000 / (1 + point.d);
                    a = 0.15 - Math.pow(d / 50, 4) * 0.15;
                    if (a > 0) {
                        vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));
                        vars.ctx.globalAlpha = a;
                        vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
                    }
                }
            }
        }
    }
    function sortFunction(a,b){
        return b.dist-a.dist;
    }
    function draw(vars){
        vars.ctx.globalAlpha=.15;
        vars.ctx.fillStyle="#000";
        vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
        drawFloor(vars);
        var point,x,y,z,a;
        for(var i=0;i<vars.points.length;++i){
            x=vars.points[i].x;
            y=vars.points[i].y;
            z=vars.points[i].z;
            point=project3D(x,y,z,vars);
            if(point.d != -1){
                vars.points[i].dist=point.d;
                size=1+vars.points[i].radius/(1+point.d);
                d=Math.abs(vars.points[i].y);
                a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;
                vars.ctx.globalAlpha=a>=0&&a<=1?a:0;
                vars.ctx.fillStyle=rgb(vars.points[i].color);
                if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
            }
        }
        vars.points.sort(sortFunction);
    }
    function spawnParticle(vars){

        var p,ls;
        pt={};
        p=Math.PI*2*Math.random();
        ls=Math.sqrt(Math.random()*vars.distributionRadius);
        pt.x=Math.sin(p)*ls;
        pt.y=-vars.vortexHeight/2;
        pt.vy=vars.initV/20+Math.random()*vars.initV;
        pt.z=Math.cos(p)*ls;
        pt.radius=200+800*Math.random();
        pt.color=pt.radius/1000+vars.frameNo/250;
        vars.points.push(pt);
    }
    function frame(vars) {
        if(vars === undefined){
            var vars={};
            vars.canvas = document.querySelector("canvas");
            vars.ctx = vars.canvas.getContext("2d");
            vars.canvas.width = document.body.clientWidth;
            vars.canvas.height = document.body.clientHeight;
            window.addEventListener("resize", function(){
                vars.canvas.width = document.body.clientWidth;
                vars.canvas.height = document.body.clientHeight;
                vars.cx=vars.canvas.width/2;
                vars.cy=vars.canvas.height/2;
            }, true);
            vars.frameNo=0;

            vars.camX = 0;
            vars.camY = 0;
            vars.camZ = -14;
            vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
            vars.yaw = 0;
            vars.cx=vars.canvas.width/2;
            vars.cy=vars.canvas.height/2;
            vars.bounding=10;
            vars.scale=500;
            vars.floor=26.5;

            vars.points=[];
            vars.initParticles=700;
            vars.initV=.01;
            vars.distributionRadius=800;
            vars.vortexHeight=25;
        }
        vars.frameNo++;
        requestAnimationFrame(function() {
            frame(vars);
        });
        process(vars);
        draw(vars);
    }
    frame();
</script>
</body>
</html>

注：转载自B站。
平平无奇lsr
关注
  • 14
    点赞
  • 踩
  • 56
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
【HTML——3d粒子特效（效果+代码）】
m0_75011249的博客
04-13 765
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取。
HTML5 WebGL酷炫粒子爆炸动画特效
06-11
一款非常令人震撼HTML5 WebGL酷炫粒子爆炸动画特效，利用了HTML5的粒子渲染特性实现。
html5 炫酷简洁网页模板
08-20
html5 css3 响应式 使用多种平台
超炫酷代码，HTML格式
06-25
娱乐文档
Canvas背景动画(六) 蛛网动画-鼠标跟随
qq_38380311的博客
03-09 765
鼠标跟随动画，粒子效果 canvas动画，鼠标跟随 项目下载地址：项目包下载 实现逻辑： a.需要引入创建粒子背景的 JavaScript 库： particles.js b. 配置动画参数，鼠标跟随参数 效果图： 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>动态效果</title> <meta na
纯html炫酷粒子旋风
04-01
这个文件中的代码文件可以用编辑器打开，也可以直接用浏览器打开，是一个可以粒子旋风。
html5 canvas 3D海洋粒子波浪动画特效
06-11
一款基于html5 canvas画布制作的3D海洋粒子波浪动画特效，酷炫的波浪粒子无限延伸动画效果。
总结了一些 html（H5） 各种 炫酷代码
afufufufu的博客
11-01 1万+
H5炫酷代码
分享亿个HTML炫酷特效代码
wwrgvjabhf的博客
01-18 1683
【HTML炫酷代码】---老李出品 让你在别人面前好好装一把
粒子网格特效
热门推荐
诗水人间
07-20 13万+
js 粒子特效
11个非常炫酷的网页样式特效【附实现代码】
web前端开发
01-08 2万+
在这之前，我们也跟大家分享很多很多关于网页特效的一些实现源码，今天，我们再跟大家分享一些网页特效源码，希望对大家有帮助。1、evanyou 效果-彩带的实现，效果如下注：这个主要用的是 ...
HTML炫酷粒子（追光者）.zip
10-03
在"HTML炫酷粒子（追光者）.html"这个文件中，我们可以通过查看源代码来学习具体实现的细节，包括HTML结构、CSS样式和JavaScript代码。这不仅可以帮助理解粒子效果的工作原理，还能为开发者提供灵感，创建自己独特的...
一款黑色炫酷粒子的html网站
03-18
标签"炫酷网站源码"和"网站源码"提示我们，这个压缩包可能包含了完整的网页源代码，供学习者或开发者参考和使用。"炫酷"一词意味着源码可能包含了一些高级的CSS技巧和JavaScript特效，例如过渡效果、变换、动画等，...
HTML5炫酷光粒子动画特效
12-12
4. `js`：这是一个文件夹，很可能包含了实现光粒子动画特效的JavaScript源代码，可能包括主逻辑文件和一些辅助函数。 5. `css`：同样是一个文件夹，存放了项目的样式表文件，用于定义元素的外观和布局。 总的来说，...
精品源码 / 炫酷特效 / 粒子背景
12-15
【粒子背景】特效是一种在网页设计和图形编程中常见的视觉表现手法，它通过模拟大量微小元素（粒子）的运动和交互，创造出...而压缩包中的文件，即“粒子背景”，很可能是包含此特效的源代码文件，供学习者研究和参考。
html 3D粒子波浪登录页面
最新发布
04-10
html 3D粒子波浪登录页面，适用于网页设计登录页面的个性化...html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
JavaScript实现在HTML中的粒子文字特效
汝嫣兮的博客
09-20 6929
JS实现HTML粒子特效，含教程与展示
动态粒子
Ryeol的博客
09-10 419
<!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> html, bod.
HTML炫酷的背景代码，可用，亲测有效
chenzhi0122的博客
06-11 1354
如果效果好的话下次给大家发一个我用在CZbuy的更漂亮的！html炫酷的背景代码，会跟随鼠标移动变化。
有没有炫酷的html粒子代码
06-01
当然有！以下是一个简单但炫酷的HTML粒子效果代码示例： ```html <div class="particle-bg"> <h1>Hello, World!</h1> </div> <style> .particle-bg { position: relative; width: 100%; height: 100vh; overflow: hidden; } .particle-bg h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5em; font-weight: bold; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); color: white; } .particle { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0.5; background-color: white; animation: particle 5s infinite; } @keyframes particle { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(100vw, 100vh) rotate(720deg); } } </style> <script> for (var i = 0; i < 100; i++) { var particle = document.createElement('div'); particle.className = 'particle'; particle.style.left = Math.random() * 100 + '%'; particle.style.top = Math.random() * 100 + '%'; particle.style.animationDuration = Math.random() * 5 + 2 + 's'; document.querySelector('.particle-bg').appendChild(particle); } </script> ``` 这个代码示例中，我们首先创建了一个有背景的`<div>`元素，然后在其中添加了一个带有文字的`<h1>`元素。然后，我们使用CSS和JavaScript创建了一些小的、随机移动和旋转的白色粒子，用来营造出一个动态的、炫酷的背景效果。 你可以通过修改CSS和JavaScript代码来调整粒子的数量、大小、运动轨迹、颜色等等，以实现更多样化的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值