❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码二、📚网站介绍
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现
三、🔗网站效果
▶️1.视频演示
90-全屏的大雪飘落3D动效
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>Snowfall</title><link rel="stylesheet" href="css/style.css"></head><body><script src="js/three.min.js"></script><script id="vertexShader" type="x-shader/x-vertex">void main() {gl_Position = vec4( position, 1.0 );}</script><script id="fragmentShader" type="x-shader/x-fragment">uniform vec2 u_resolution;uniform vec2 u_mouse;uniform float u_time;uniform sampler2D u_noise;#define PI 3.141592653589793#define TAU 6.const float multiplier = 25.5;const float zoomSpeed = 10.;const int layers = 10;const int octaves = 5;vec2 hash2(vec2 p){vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;return o;}mat2 rotate2d(float _angle){return mat2(cos(_angle),sin(_angle),-sin(_angle),cos(_angle));}vec3 hsb2rgb( in vec3 c ){vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0,0.0,1.0 );rgb = rgb*rgb*(3.0-2.0*rgb);return c.z * mix( vec3(1.0), rgb, c.y);}float hash(vec2 p){float o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).x;return o;}float noise(vec2 uv) {vec2 id = floor(uv);vec2 subuv = fract(uv);vec2 u = subuv * subuv * (3. - 2. * subuv);float a = hash(id);float b = hash(id + vec2(1., 0.));float c = hash(id + vec2(0., 1.));float d = hash(id + vec2(1., 1.));return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);}float fbm(in vec2 uv) {float s = .0;float m = .0;float a = .5;for(int i = 0; i < octaves; i++) {s += a * noise(uv);m += a;a *= .5;uv *= 2.;}return s / m;}vec3 domain(vec2 z){return vec3(hsb2rgb(vec3(atan(z.y,z.x)/TAU,1.,1.)));}vec3 colour(vec2 z) {return domain(z);}// The render function is where we render the pattern to be added to the layervec3 render(vec2 uv, float scale, vec3 colour) {vec2 id = floor(uv);vec2 subuv = fract(uv);vec2 rand = hash2(id);float bokeh = abs(scale) * 1.;float particle = 0.;if(length(rand) > 1.3) {vec2 pos = subuv-.5;float field = length(pos);particle = smoothstep(.3, 0., field);particle += smoothstep(.4, 0.34 * bokeh, field);}return vec3(particle*2.);}vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity, vec3 colour, float n) {vec2 _uv = uv;// Scale// Generating a scale value between zero and 1 based on a mod of u_time// A frequency of 10 dixided by the layer index (10 / layers * layer)float scale = mod((u_time + zoomSpeed / float(layers) * float(layer)) / zoomSpeed, -1.);uv *= 20.; // The initial scale. Increasing this makes the cells smaller and the "speed" apepar fasteruv *= scale*scale; // then modifying the overall scale by the generated amount// uv *= 1. + ( ( n*.5 ) * ( length(_uv) ) );// uv += .5*float(layer);uv = rotate2d(u_time / 10.) * uv; // rotartinguv += vec2(25. + sin(u_time*.1)) * float(layer); // ofsetting the UV by an arbitrary amount to make the layer appear different// rendervec3 pass = render(uv * multiplier, scale, colour) * .2; // render the pass// this is the opacity of the layer fading in from the "bottom"opacity = 1. + scale;float _opacity = opacity;// pass += n * .5 * mix(vec3(0., .5, 1.5), vec3(1., .5, 0.), opacity);// This is the opacity of the layer fading out at the top (we want this minimal, hence the smoothstep)float endOpacity = smoothstep(0., 0.4, scale * -1.);opacity += endOpacity;return pass * _opacity * endOpacity;}void main() {vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy);if(u_resolution.y < u_resolution.x) {uv /= u_resolution.y;} else {uv /= u_resolution.x;}// uv.y += cos(u_time * .1) * .5;// uv.x += sin(u_time * .1) * .5;// float n = fbm(uv * 3. - 2.);float n = fbm((uv + vec2(sin(u_time*.1), u_time*.1)) * 2. - 2.);vec3 colour = vec3(0.);// colour = n * mix(vec3(0., .5, 1.5), vec3(1., .5, -.1), n);colour = n * mix(vec3(0., .5, 1.5), clamp(vec3(1., .5, .25)*2., 0., 1.), n);// colour -= n*n*n*n*.4;// colour += smoothstep(.8, 2.5, sin(n*n*n*8.))*.4;float opacity = 1.;float opacity_sum = 1.;for(int i = 1; i <= layers; i++) {colour += renderLayer(i, layers, uv, opacity, colour, n);opacity_sum += opacity;}colour /= opacity_sum;gl_FragColor = vec4(clamp(colour * 20., 0., 1.),1.0);}</script><div id="container" touch-action="none"></div><script src="js/script.js"></script></body></html>
🏠CSS样式代码
body {margin: 0;padding: 0;}#container {position: fixed;touch-action: none;}
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
