❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
📂文章目录
二、📚网站介绍
📒网站文件方面：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.视频演示
42-圣诞节3d相册(含音乐开关)
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><scriptsrc="js/jquery.min.js"></script><linktype="text/css"href="./css/style.css"rel="stylesheet"/><style>html,
body{width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.container{width: 100%;height: 100%;margin: 0;padding: 0;}h1{text-align: center;}#music{position: fixed;top: 0;left: 0;}</style></head><body><!-- <audio autoplay="autopaly">
<source src="sjzmd.mp3" type="audio/mp3" />
</audio> --><audiosrc="sd.mp3"controls="controls"autoplay="autoplay"loop="loop"id="music"></audio><divid="jsi-snow-container"class="container"></div><divclass="box"><ulclass="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><olclass="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol></div></div><script>varRENDERER={SNOW_COUNT:{INIT:100,DELTA:1},BACKGROUND_COLOR:'hsl(%h, 50%, %l%)',INIT_HUE:180,DELTA_HUE:0.1,init:function(){this.setParameters();this.reconstructMethod();this.createSnow(this.SNOW_COUNT.INIT*this.countRate,true);this.render();},setParameters:function(){this.$window =$(window);this.$container =$('#jsi-snow-container');this.width =this.$container.width();this.height =this.$container.height();this.center ={x:this.width /2,y:this.height /2};this.countRate =this.width *this.height /500/500;this.canvas =$('<canvas />').attr({width:this.width,height:this.height
}).appendTo(this.$container).get(0);this.context =this.canvas.getContext('2d');this.radius = Math.sqrt(this.center.x *this.center.x +this.center.y *this.center.y);this.hue =this.INIT_HUE;this.snows =[];},reconstructMethod:function(){this.render =this.render.bind(this);},createSnow:function(count, toRandomize){for(var i =0; i < count; i++){this.snows.push(newSNOW(this.width,this.height,this.center, toRandomize));}},render:function(){requestAnimationFrame(this.render);var gradient =this.context.createRadialGradient(this.center.x,this.center.y,0,this.center.x,this.center.y,this.radius),
backgroundColor =this.BACKGROUND_COLOR.replace('%h',this.hue);
gradient.addColorStop(0, backgroundColor.replace('%l',30));
gradient.addColorStop(0.2, backgroundColor.replace('%l',20));
gradient.addColorStop(1, backgroundColor.replace('%l',5));this.context.fillStyle = gradient;this.context.fillRect(0,0,this.width,this.height);for(var i =this.snows.length -1; i >=0; i--){if(!this.snows[i].render(this.context)){this.snows.splice(i,1);}}this.hue +=this.DELTA_HUE;this.hue %=360;this.createSnow(this.SNOW_COUNT.DELTA,false);}};varSNOW=function(width, height, center, toRandomize){this.width = width;this.height = height;this.center = center;this.init(toRandomize);};SNOW.prototype ={RADIUS:20,OFFSET:4,INIT_POSITION_MARGIN:20,COLOR:'rgba(255, 255, 255, 0.8)',TOP_RADIUS:{MIN:1,MAX:3},SCALE:{INIT:0.04,DELTA:0.01},DELTA_ROTATE:{MIN:-Math.PI/180/2,MAX: Math.PI/180/2},THRESHOLD_TRANSPARENCY:0.7,VELOCITY:{MIN:-1,MAX:1},LINE_WIDTH:2,BLUR:10,init:function(toRandomize){this.setParameters(toRandomize);this.createSnow();if(
navigator.userAgent.match(/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){var box = document.querySelectorAll('.box')[0];
box.style.left ='42%';}},setParameters:function(toRandomize){if(!this.canvas){this.radius =this.RADIUS+this.TOP_RADIUS.MAX*2+this.LINE_WIDTH;this.length =this.radius *2;this.canvas =$('<canvas />').attr({width:this.length,height:this.length
}).get(0);this.context =this.canvas.getContext('2d');}this.topRadius =this.getRandomValue(this.TOP_RADIUS);var theta = Math.PI*2* Math.random();this.x =this.center.x +this.INIT_POSITION_MARGIN* Math.cos(theta);this.y =this.center.y +this.INIT_POSITION_MARGIN* Math.sin(theta);this.vx =this.getRandomValue(this.VELOCITY);this.vy =this.getRandomValue(this.VELOCITY);this.deltaRotate =this.getRandomValue(this.DELTA_ROTATE);this.scale =this.SCALE.INIT;this.deltaScale =1+this.SCALE.DELTA*500/ Math.max(this.width,this.height);this.rotate =0;if(toRandomize){for(var i =0, count = Math.random()*1000; i < count; i++){this.x +=this.vx;this.y +=this.vy;this.scale *=this.deltaScale;this.rotate +=this.deltaRotate;}}},getRandomValue:function(range){return range.MIN+(range.MAX- range.MIN)* Math.random();},createSnow:function(){this.context.clearRect(0,0,this.length,this.length);this.context.save();this.context.beginPath();this.context.translate(this.radius,this.radius);this.context.strokeStyle =this.COLOR;this.context.lineWidth =this.LINE_WIDTH;this.context.shadowColor =this.COLOR;this.context.shadowBlur =this.BLUR;var angle60 = Math.PI/180*60,
sin60 = Math.sin(angle60),
cos60 = Math.cos(angle60),
threshold = Math.random()*this.RADIUS/this.OFFSET|0,
rate =0.5+ Math.random()*0.5,
offsetY =this.OFFSET* Math.random()*2,
offsetCount =this.RADIUS/this.OFFSET;for(var i =0; i <6; i++){this.context.save();this.context.rotate(angle60 * i);for(var j =0; j <= threshold; j++){var y =-this.OFFSET* j;this.context.moveTo(0, y);this.context.lineTo(y * sin60, y * cos60);}for(var j = threshold; j < offsetCount; j++){var y =-this.OFFSET* j,
x = j *(offsetCount - j +1)* rate;this.context.moveTo(x, y - offsetY);this.context.lineTo(0, y);this.context.lineTo(-x, y - offsetY);}this.context.moveTo(0,0);this.context.lineTo(0,-this.RADIUS);this.context.arc(0,-this.RADIUS-this.topRadius,this.topRadius, Math.PI/2, Math.PI*2.5,false);this.context.restore();}this.context.stroke();this.context.restore();},render:function(context){
context.save();if(this.scale >this.THRESHOLD_TRANSPARENCY){
context.globalAlpha = Math.max(0,(1-this.scale)/(1-this.THRESHOLD_TRANSPARENCY));if(this.scale >1||this.x <-this.radius ||this.x >this.width +this.radius ||this.y <-this.radius ||this.y >this.height +this.radius){
context.restore();returnfalse;}}
context.translate(this.x,this.y);
context.rotate(this.rotate);
context.scale(this.scale,this.scale);
context.drawImage(this.canvas,-this.radius,-this.radius);
context.restore();this.x +=this.vx;this.y +=this.vy;this.scale *=this.deltaScale;this.rotate +=this.deltaRotate;returntrue;}};$(function(){RENDERER.init();});</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: relative;/* margin-left: 42%; *//* margin-top: 22%; */top: -55%;left: 47%;-webkit-transform-style: preserve-3d;-webkit-transform:rotateX(13deg);-webkit-animation: move 5s linear infinite;}ransform: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.如果我的博客对你有帮助
请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦！
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
本文转载自: https://blog.csdn.net/p305114466/article/details/127012047
版权归原作者 @蜡笔小新星 所有， 如有侵权，请联系我们删除。
版权归原作者 @蜡笔小新星 所有， 如有侵权，请联系我们删除。