首页 > 分享 > 125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript (1)

125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript (1)

花匠小妙招
2024-11-25 18:10

️ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业：【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

文章目录二、网站介绍三、网站效果 2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码

二、网站介绍

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

三、网站效果

2.图片演示

在这里插入图片描述

下面以樱花雨3D动态相册源码演示为例

四、网站代码

HTML结构代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.min.js"></script> <link type="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; background-color: #000000; } </style> </head> <body> <audio autoplay="autopaly"> <source src="renxi.mp3" type="audio/mp3" /> </audio> <div id="jsi-cherry-container" class="container"> <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> </div> <script> setParameters: function() { this.$container = $('#jsi-cherry-container'); this.width = this.$container.width(); this.height = this.$container.height(); this.context = $('<canvas />') .attr({ width: this.width, height: this.height }) .appendTo(this.$container) .get(0) .getContext('2d'); this.cherries = []; this.maxAddingInterval = Math.round( (this.MAX_ADDING_INTERVAL * 1000) / this.width ); this.addingInterval = this.maxAddingInterval; }, reconstructMethods: function() { this.render = this.render.bind(this); }, render: function() { requestAnimationFrame(this.render); this.context.clearRect(0, 0, this.width, this.height); this.cherries.sort(function(cherry1, cherry2) { return cherry1.z - cherry2.z; }); for (var i = this.cherries.length - 1; i >= 0; i--) { if (!this.cherries[i].render(this.context)) { this.cherries.splice(i, 1); } } if (--this.addingInterval == 0) { this.addingInterval = this.maxAddingInterval; this.cherries.push(new CHERRY_BLOSSOM(this, false)); } } }; var CHERRY_BLOSSOM = function(renderer, isRandom) { this.renderer = renderer; this.init(isRandom); }; CHERRY_BLOSSOM.prototype = { FOCUS_POSITION: 300, FAR_LIMIT: 600, MAX_RIPPLE_COUNT: 100, RIPPLE_RADIUS: 100, SURFACE_RATE: 0.5, SINK_OFFSET: 20, init: function(isRandom) { this.x = this.getRandomValue( -this.renderer.width, this.renderer.width ); this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5; this.z = this.getRandomValue(0, this.FAR_LIMIT); this.vx = this.getRandomValue(-2, 2); this.vy = -2; this.theta = this.getRandomValue(0, Math.PI * 2); this.phi = this.getRandomValue(0, Math.PI * 2); this.psi = 0; this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300); this.opacity = 0; this.endTheta = false; this.endPhi = false; this.rippleCount = 0; var axis = this.getAxis(), theta = this.theta + (Math.ceil( -(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy ) * Math.PI) / 500; theta %= Math.PI * 2; this.offsetY = 40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1); this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate; this.entityColor = this.renderer.context.createRadialGradient( 0, 40, 0, 0, 40, 80 ); this.entityColor.addColorStop( 0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)' ); context.save(); context.globalAlpha = this.opacity; context.fillStyle = this.shadowColor; context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)'; context.translate( axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y) ); context.rotate(Math.PI - this.theta); context.scale(axis.rate * -Math.sin(this.phi), axis.rate); context.translate(0, this.offsetY); this.renderCherry(context, axis); context.restore(); } context.save(); context.fillStyle = this.entityColor; context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)'; context.translate( axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate) ); context.rotate(this.theta); context.scale(axis.rate * Math.sin(this.phi), axis.rate); context.translate(0, this.offsetY); this.renderCherry(context, axis); context.restore(); if (this.y <= -this.renderer.height / 4) { if (!this.endTheta) { for ( var theta = Math.PI / 2, end = (Math.PI * 3) / 2; theta <= end; theta += Math.PI ) { if (this.theta < theta && this.theta + Math.PI / 200 > theta) { this.theta = theta; this.endTheta = true; break; } } } if (!this.endPhi) { for ( var phi = Math.PI / 8, end = (Math.PI * 7) / 8; phi <= end; phi += (Math.PI * 3) / 4 ) { if (this.phi < phi && this.phi + Math.PI / 200 > phi) { this.phi = Math.PI / 8; this.endPhi = true; break; } } } } if (!this.endTheta) { if (axis.y == this.thresholdY) { this.theta += (Math.PI / 200) * (this.theta < Math.PI / 2 || (this.theta >= Math.PI && this.theta < (Math.PI * 3) / 2) ? 1 : -1); } else { this.theta += Math.PI / 500; } this.theta %= Math.PI * 2; } if (this.endPhi) { if (this.rippleCount == this.MAX_RIPPLE_COUNT) { this.psi += this.dpsi; this.psi %= Math.PI * 2; } } else { this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500); this.phi %= Math.PI; } if (this.y <= -this.renderer.height * this.SURFACE_RATE) { this.x += 2; this.y = -this.renderer.height * this.SURFACE_RATE; } else { this.x += this.vx; this.y += this.vy; } return ( this.z > -this.FOCUS_POSITION && this.z < this.FAR_LIMIT && this.x < this.renderer.width * 1.5 ); } }; $(function() { RENDERER.init(); }); </script> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253

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; 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(../img/01.png) no-repeat 0 0; -webkit-transform: translateZ(50px); } .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); } }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798