1500字范文 > HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福

HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福

时间：2019-01-06 04:16:57

HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡100款七夕情人节告白源码-专栏文章

作品介绍

1.网页作品简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++）均可修改网页。

文章目录

HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!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;}</style></head><body><audio autoplay="autopaly"><source src="sjzmd.mp3" type="audio/mp3" /></audio><div id="jsi-snow-container" class="container"></div><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>var RENDERER = {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(new SNOW(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);}};var SNOW = 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.rotate += this.deltaRotate;return true;}};$(function() {RENDERER.init();});</script></body></html>