🌩️ 网站建设定制开发精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页:
🎓 web网站建设定制开发前端期末大作业：
🧡 网站建设定制开发程序员有趣的告白方式：
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
📂文章目录
二、📚网站介绍
📓网站程序方面：计划采用最新的网页编程语言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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
🏠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); }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻