HTML5七夕情人节表白网页制作【浪漫的空中散落的花瓣3D相册】HTML+CSS+JavaScript 3D动态相册源码素材 html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
❤ 【作者主页——获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——毕设项目精品实战案例】
文章目录 一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码 三、精彩专栏一、网页介绍
1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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 radius uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start attribute vec3 aPosition; attribute vec3 aEuler; attribute vec2 aMisc; //x:size, y:fade 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; void main(void) { // Projection is based on vertical angle vec4 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; #endif uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start const 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 degree const 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; #endif uniform 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; #endif uniform 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; #endif uniform 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; #endif uniform 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; #endif uniform 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> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
2.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); } } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
三、精彩专栏
看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。—— `
以上内容技术相关问题欢迎一起交流学习
相关知识
HTML5七夕情人节表白网页制作 (浪漫的求婚动画) HTML+CSS+JavaScript
100款 ❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 【建议收藏】
HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码
web网页设计实例作业 ：鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript
HTML5期末大作业：鲜花主题网页设计——简约的网上花店网站设计(4页) HTML+CSS+JavaScript
520表白网页,程序员浪漫表白,求婚倒计时网站制作 HTML+CSS+JS
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript (1)
网址: HTML5七夕情人节表白网页制作【浪漫的空中散落的花瓣3D相册】HTML+CSS+JavaScript 3D动态相册源码素材 html生日快乐祝福网页制作 https://m.huajiangbk.com/newsview792421.html
| 上一篇: 表达爱意用什么花（哪些花可以表达 |
下一篇: 代表爱意的花都有哪些（象征爱情的 |
