900字范文 > HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript

HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript

时间：2020-07-02 20:19:02

HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript

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

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

🧡作者主页-更多源码

🧡七夕情人节专栏文章

作品介绍

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

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

文章目录

HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript作品介绍一、作品展示(已兼容手机端/电脑端)二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

一、作品展示(已兼容手机端/电脑端)

二、文件目录

三、代码实现

<!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" loop="loop"/></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>var RENDERER = {INIT_CHERRY_BLOSSOM_COUNT: 30,MAX_ADDING_INTERVAL: 10,init: function() {this.setParameters();this.reconstructMethods();this.createCherries();this.render();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];console.log(box, '移动端');box.style.marginTop = '65%';}},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);},createCherries: function() {for (var i = 0,length = Math.round((this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000);i < length;i++) {this.cherries.push(new CHERRY_BLOSSOM(this, true));}},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,80this.shadowColor = this.renderer.context.createRadialGradient(0,40,0,0,40,80);this.shadowColor.addColorStop(0,'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(0.05,'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(1,'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');},getRandomValue: function(min, max) {return min + (max - min) * Math.random();},getAxis: function() {var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),x = this.renderer.width / 2 + this.x * rate,y = this.renderer.height / 2 - this.y * rate;return {rate: rate, x: x, y: y };},renderCherry: function(context, axis) {context.beginPath();context.moveTo(0, 40);context.bezierCurveTo(-60, 20, -10, -60, 0, -20);context.bezierCurveTo(10, -60, 60, 20, 0, 40);context.fill();for (var i = -4; i < 4; i++) {context.beginPath();context.moveTo(0, 40);context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);context.stroke();}},render: function(context) {var axis = this.getAxis();if (axis.y == this.thresholdY &&this.rippleCount < this.MAX_RIPPLE_COUNT) {context.save();context.lineWidth = 2;context.strokeStyle ='hsla(0, 0%, 100%, ' +(this.MAX_RIPPLE_COUNT - this.rippleCount) /this.MAX_RIPPLE_COUNT +')';context.translate(axis.x +this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1),axis.y);context.scale(1, 0.3);context.beginPath();context.arc(};$(function() {RENDERER.init();});</script></body></html>