600字范文 > HTML5七夕情人节表白网页_浪漫星空-爱心相册_ HTML+CSS+JS 求婚 html生日快乐祝福

HTML5七夕情人节表白网页_浪漫星空-爱心相册_ HTML+CSS+JS 求婚 html生日快乐祝福

时间：2019-07-27 06:01:03

HTML5七夕情人节表白网页❤浪漫星空-爱心相册❤ 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七夕情人节表白网页❤浪漫星空-爱心相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

一、作品展示

二、文件目录

三、代码实现

<html><head><meta charset="utf-8" /><script src="/jquery/jquery-1.10.2.js"></script><style type="text/css">@import url("/css?family=Montserrat:200,300,400,600");.more-pens {position: fixed;left: 20px;bottom: 20px;z-index: 10;font-family: "Montserrat";font-size: 12px;}a.white-mode,height: 100%;}.img {position: absolute;left: 50%;top: 60%;transform: translate(-50%, -50%);width: 440px;height: 430px;}#pinkboard {position: relative;top: 0%;left: 0%;height: 429px;}.STARDUST1 {position: relative !important;top: -60px;}.STARDUST2 {position: relative !important;top: -40px;}.STARDUST3 {position: relative !important;top: -20px;}/* 星空css */html,body {padding: 0px;margin: 0px;width: 100%;height: 100%;position: fixed;}body {display: flex;justify-content: center;align-items: center;-webkit-filter: contrast(120%);filter: contrast(120%);background-image: radial-gradient(1600px at 70% 120%,rgba(33, 39, 80, 1) 10%,#020409 100%) !important;/* background-color: black; */}.container2 {/* z-index: 8; */position: absolute;width: 100%;height: 100%;background-image: radial-gradient(1600px at 70% 120%,rgba(33, 39, 80, 1) 10%,#020409 100%) !important;}.content {width: inherit;height: inherit;width: 100%;height: 100%;background-image: radial-gradient(1600px at 70% 120%,rgba(33, 39, 80, 1) 10%,#020409 100%) !important;}#universe {width: 100%;height: 100%;}#footerContent {font-family: sans-serif;font-size: 110%;color: rgba(200, 220, 255, 0.3);width: 100%;position: fixed;bottom: 0px;padding: 20px;text-align: center;z-index: 20;}/* #footer {position: absolute;bottom: 0px;height: 300px;width: 100%;} */#scene {height: 100%;position: absolute;left: 50%;margin-left: -800px;}a {text-decoration: none;color: rgba(200, 220, 255, 1);opacity: 0.4;transition: opacity 0.4s ease;}a:hover {opacity: 1;}</style></head><body><audio autoplay="autopaly"><source src="renxi.mp3" type="audio/mp3" /></audio><div class="container2"><div class="content"><canvas id="universe"></canvas></div></div><div class="title"><h3 class="STARDUST1">   - </h3><h1 class="STARDUST2">小夕-相遇是缘</h1><h3 class="STARDUST3">L O V E <strong>❤</strong> Y O U</h3><img class="img" src="./123.png" alt="" /><canvas id="pinkboard"> </canvas></div></body><script>let particles = [];let microparticles = [];const c1 = createCanvas({width: $(window).width(),height: $(window).height(),});const tela = c1.canvas;const canvas = c1.context;// $("body").append(tela);$("body").append(c1.canvas);class Particle1 {constructor(canvas) {this.random = Math.random();this.random1 = Math.random();this.random2 = Math.random();this.progress = 0;this.canvas = canvas;this.life = 1000 + Math.random() * 3000;this.x =$(window).width() / 2 + (Math.random() * 20 - Math.random() * 20);this.y = $(window).height();this.s = 2 + Math.random();this.w = $(window).width();this.h = $(window).height();this.direction = this.random > 0.5 ? -1 : 1;this.radius = 1 + 3 * this.random;this.color = "#ff417d";this.ID = setInterval(function () {microparticles.push(new microParticle(c1.context, {us) {return false;}if (this.y > this.h) {return false;}this.render();this.progress++;return true;}}var random_life = 1000;setInterval(function () {particles.push(new Particle1(canvas));random_life = 2000 * Math.random();}.bind(this),random_life);function clear() {let grd = canvas.createRadialGradient(tela.width / 2,tela.height / 2,0,tela.width / 2,tela.height / 2,tela.width);grd.addColorStop(0, "rgba(20,20,20,1)");grd.addColorStop(1, "rgba(0,0,0,0)");// Fill with gradientcanvas.globalAlpha = 0.16;canvas.fillStyle = grd;canvas.fillRect(0, 0, tela.width, tela.height);}function blur(ctx, canvas, amt) {// ctx.filter = `blur(${amt}px)`// ctx.drawImage(canvas, 0, 0)// ctx.filter = 'none'}function update() {clear();particles = particles.filter(function (p) {return p.move();});microparticles = microparticles.filter(function (mp) {return mp.move();});requestAnimationFrame(update.bind(this));}function createCanvas(properties) {let canvas = document.createElement("canvas");canvas.width = properties.width;// canvas.style.zIndex = 999;canvas.height = properties.height;let context = canvas.getContext("2d");return {canvas: canvas,context: context,};}update();</script><script>/** Settings*/var settings = {particles: {length: 500, // maximum amount of particlesduration: 2, // particle duration in secvelocity: 100, // particle velocity in pixels/seceffect: -0.75, // play with this for a nice effectsize: 30, // particle size in pixels},};/** RequestAnimationFrame polyfill by Erik M?ller*/(function () {var b = 0;var c = ["ms", "moz", "webkit", "o"];for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];window.cancelAnimationFrame =window[c[a] + "CancelAnimationFrame"] ||window[c[a] + "CancelRequestAnimationFrame"];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function (h, e) {var d = new Date().getTime();var f = Math.max(0, 16 - (d - b));var g = window.setTimeout(function () {h(d + f);}, f);b = d + f;return g;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function (d) {clearTimeout(d);};}})();/** Point class*/var Point = (function () {function Point(x, y) {this.x = typeof x !== "undefined" ? x : 0;this.y = typeof y !== "undefined" ? y : 0;}Point.prototype.clone = function () {return new Point(this.x, this.y);};Point.prototype.length = function (length) {if (typeof length == "undefined")return Math.sqrt(this.x * this.x + this.y * this.y);this.normalize();this.x *= length;this.y *= length;return this;};Point.prototype.normalize = function () {var length = this.length();this.x /= length;this.y /= length;return this;};return Point;})();/** Particle class*/var Particle = (function () {function Particle() {this.position = new Point();this.velocity = new Point();this.acceleration = new Point();this.age = 0;}Particle.prototype.initialize = function (x, y, dx, dy) {this.position.x = x;this.position.y = y;this.velocity.x = dx;this.velocity.y = dy;this.acceleration.x = dx * settings.particles.effect;this.acceleration.y = dy * settings.particles.effect;this.age = 0;};Particle.prototype.update = function (deltaTime) {this.position.x += this.velocity.x * deltaTime;this.position.y += this.velocity.y * deltaTime;<script>window.requestAnimationFrame =window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame;var starDensity = 0.216;var speedCoeff = 0.05;var width;var height;var starCount;var circleRadius;var circleCenter;var first = true;var giantColor = "180,184,240";var starColor = "226,225,142";var cometColor = "226,225,224";var canva = document.getElementById("universe");canva.style.zIndex = 200;var stars = [];windowResizeHandler();window.addEventListener("resize", windowResizeHandler, false);createUniverse();function createUniverse() {universe = canva.getContext("2d");for (var i = 0; i < starCount; i++) {stars[i] = new Star();stars[i].reset();}draw();}function draw() {universe.clearRect(0, 0, width, height);var starsLength = stars.length;for (var i = 0; i < starsLength; i++) {var star = stars[i];(function () {setTimeout(function () {first = false;}, 50);})();}function getProbability(percents) {return Math.floor(Math.random() * 1000) + 1 < percents * 10;}function getRandInterval(min, max) {return Math.random() * (max - min) + min;}function windowResizeHandler() {width = window.innerWidth;height = window.innerHeight;starCount = width * starDensity;circleRadius = width > height ? height / 2 : width / 2;circleCenter = {x: width / 2,y: height / 2,};canva.setAttribute("width", width);canva.setAttribute("height", height);}</script></html>