❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示
32-烂漫的空中散落的花瓣3D相册(无开场)
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>html5+canvas烂漫空中散落的花瓣3D相册动画特效</title><meta name="description" content="Change OR Die" /><script src="js/jquery.min.js"></script><link type="text/css" href="./css/style.css" rel="stylesheet" /><style type="text/css">* {margin: 0;padding: 0;list-style-type: none;}a,img {border: 0;}body {font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";}/* 相册css */html,body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style></head><body><audio src="music/4.mp3" autoplay="autoplay" loop="loop"></audio><canvas id="sakura"></canvas><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol class="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol></div><!-- sakura shader --><script id="sakura_point_vsh" type="x-shader/x_vertex">uniform mat4 uProjection;uniform mat4 uModelview;uniform vec3 uResolution;uniform vec3 uOffset;uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radiusuniform vec3 uFade; //x:start distance, y:half distance, z:near fade startattribute vec3 aPosition;attribute vec3 aEuler;attribute vec2 aMisc; //x:size, y:fadevarying vec3 pposition;varying float psize;varying float palpha;varying float pdist;//varying mat3 rotMat;varying vec3 normX;varying vec3 normY;varying vec3 normZ;varying vec3 normal;varying float diffuse;varying float specular;varying float rstop;varying float distancefade;void main(void) {// Projection is based on vertical anglevec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);gl_Position = uProjection * pos;gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;pposition = pos.xyz;psize = aMisc.x;pdist = length(pos.xyz);palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);vec3 elrsn = sin(aEuler);vec3 elrcs = cos(aEuler);mat3 rotx = mat3(1.0, 0.0, 0.0,0.0, elrcs.x, elrsn.x,0.0, -elrsn.x, elrcs.x);mat3 roty = mat3(elrcs.y, 0.0, -elrsn.y,0.0, 1.0, 0.0,elrsn.y, 0.0, elrcs.y);mat3 rotz = mat3(elrcs.z, elrsn.z, 0.0,-elrsn.z, elrcs.z, 0.0,0.0, 0.0, 1.0);mat3 rotmat = rotx * roty * rotz;normal = rotmat[2];mat3 trrotm = mat3(rotmat[0][0], rotmat[1][0], rotmat[2][0],rotmat[0][1], rotmat[1][1], rotmat[2][1],rotmat[0][2], rotmat[1][2], rotmat[2][2]);normX = trrotm[0];normY = trrotm[1];normZ = trrotm[2];const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);float tmpdfs = dot(lit, normal);if(tmpdfs < 0.0) {normal = -normal;tmpdfs = dot(lit, normal);}diffuse = 0.4 + tmpdfs;vec3 eyev = normalize(-pos.xyz);if(dot(eyev, normal) > 0.0) {vec3 hv = normalize(eyev + lit);specular = pow(max(dot(hv, normal), 0.0), 20.0);}else {specular = 0.0;}rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);rstop = pow(rstop, 0.5);//-0.69315 = ln(0.5)distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));}</script><script id="sakura_point_fsh" type="x-shader/x_fragment">#ifdef GL_ES//precision mediump float;precision highp float;#endifuniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radiusuniform vec3 uFade; //x:start distance, y:half distance, z:near fade startconst vec3 fadeCol = vec3(0.08, 0.03, 0.06);varying vec3 pposition;varying float psize;varying float palpha;varying float pdist;//varying mat3 rotMat;varying vec3 normX;varying vec3 normY;varying vec3 normZ;varying vec3 normal;varying float diffuse;varying float specular;varying float rstop;varying float distancefade;float ellipse(vec2 p, vec2 o, vec2 r) {vec2 lp = (p - o) / r;return length(lp) - 1.0;}void main(void) {vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;vec3 d = vec3(0.0, 0.0, -1.0);float nd = normZ.z; //dot(-normZ, d);if(abs(nd) < 0.0001) discard;float np = dot(normZ, p);vec3 tp = p + d * np / nd;vec2 coord = vec2(dot(normX, tp), dot(normY, tp));//angle = 15 degreeconst float flwrsn = 0.258819045102521;const float flwrcs = 0.965925826289068;mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;float r;if(flwrp.x < 0.0) {r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);}else {r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);}if(r > rstop) discard;vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));col *= vec3(1.0, grady, grady);col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));col = col * diffuse + specular;col = mix(fadeCol, col, distancefade);float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;alpha = smoothstep(0.0, 1.0, alpha) * palpha;gl_FragColor = vec4(col * 0.5, alpha);}</script><!-- effects --><script id="fx_common_vsh" type="x-shader/x_vertex">uniform vec3 uResolution;attribute vec2 aPosition;varying vec2 texCoord;varying vec2 screenCoord;void main(void) {gl_Position = vec4(aPosition, 0.0, 1.0);texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);}</script><script id="bg_fsh" type="x-shader/x_fragment">#ifdef GL_ES//precision mediump float;precision highp float;#endifuniform vec2 uTimes;varying vec2 texCoord;varying vec2 screenCoord;void main(void) {vec3 col;float c;vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);c = exp(-pow(length(tmpv) * 1.8, 2.0));col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);gl_FragColor = vec4(col * 0.5, 1.0);}</script><script id="fx_brightbuf_fsh" type="x-shader/x_fragment">#ifdef GL_ES//precision mediump float;precision highp float;#endifuniform sampler2D uSrc;uniform vec2 uDelta;varying vec2 texCoord;varying vec2 screenCoord;void main(void) {vec4 col = texture2D(uSrc, texCoord);gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);}</script><script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">#ifdef GL_ES//precision mediump float;precision highp float;#endifuniform sampler2D uSrc;uniform vec2 uDelta;uniform vec4 uBlurDir; //dir(x, y), stride(z, w)varying vec2 texCoord;varying vec2 screenCoord;void main(void) {vec4 col = texture2D(uSrc, texCoord);col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);gl_FragColor = col / 5.0;}</script><!-- effect fragment shader template --><script id="fx_common_fsh" type="x-shader/x_fragment">#ifdef GL_ES//precision mediump float;precision highp float;#endifuniform sampler2D uSrc;uniform vec2 uDelta;varying vec2 texCoord;varying vec2 screenCoord;void main(void) {gl_FragColor = texture2D(uSrc, texCoord);}</script><!-- post processing --><script id="pp_final_vsh" type="x-shader/x_vertex">uniform vec3 uResolution;attribute vec2 aPosition;varying vec2 texCoord;varying vec2 screenCoord;void main(void) {gl_Position = vec4(aPosition, 0.0, 1.0);texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);}</script><script id="pp_final_fsh" type="x-shader/x_fragment">#ifdef GL_ES//precision mediump float;precision highp float;#endifuniform sampler2D uSrc;uniform sampler2D uBloom;uniform vec2 uDelta;varying vec2 texCoord;varying vec2 screenCoord;void main(void) {vec4 srccol = texture2D(uSrc, texCoord) * 2.0;vec4 bloomcol = texture2D(uBloom, texCoord);vec4 col;col = srccol + bloomcol * (vec4(1.0) + srccol);col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)gl_FragColor = vec4(col.rgb, 1.0);gl_FragColor.a = 1.0;}</script><script src="js/index.js"></script></body></html>
🏠CSS样式代码
@charset "utf-8";* {margin: 0;padding: 0;}body {max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: absolute;margin-left: auto;margin-right: auto;}li {list-style: none;}.box {width: 200px;height: 200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: absolute;top: 40%;left: 45%;transform: translate(-50%, -50%);/* margin-left: 42%; *//* margin-top: 22%; */-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(13deg);-webkit-animation: move 5s linear infinite;}.minbox {width: 100px;height: 100px;position: absolute;left: 50px;top: 30px;-webkit-transform-style: preserve-3d;}.minbox li {width: 100px;height: 100px;position: absolute;left: 0;top: 0;}.minbox li:nth-child(1) {background: url(../images/01.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.minbox li:nth-child(2) {background: url(../images/02.png) no-repeat 0 0;-webkit-transform: rotateX(180deg) translateZ(50px);}.minbox li:nth-child(3) {background: url(../images/03.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);}.minbox li:nth-child(4) {background: url(../images/04.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);}.minbox li:nth-child(5) {background: url(../images/05.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);}.minbox li:nth-child(6) {background: url(../images/06.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);}.maxbox li:nth-child(1) {background: url(../images/1.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.maxbox li:nth-child(2) {background: url(../images/2.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.maxbox li:nth-child(3) {background: url(../images/3.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);}.maxbox li:nth-child(4) {background: url(../images/4.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);}.maxbox li:nth-child(5) {background: url(../images/5.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);}.maxbox li:nth-child(6) {background: url(../images/6.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);}.maxbox {width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;}.maxbox li {width: 200px;height: 200px;background: #fff;border: 1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition: all 1s ease;}.maxbox li:nth-child(1) {-webkit-transform: translateZ(100px);}.maxbox li:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(100px);}.maxbox li:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(100px);}.maxbox li:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(100px);}.maxbox li:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(100px);}.maxbox li:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(100px);}.box:hover ol li:nth-child(1) {-webkit-transform: translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}@keyframes move {0% {-webkit-transform: rotateX(13deg) rotateY(0deg);}100% {-webkit-transform: rotateX(13deg) rotateY(360deg);}}
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
如果觉得《七夕情人节520程序员表白html网页源码送女友男友礼物》对你有帮助，请点赞、收藏，并留下你的观点哦！
