500字范文 > HTML5七夕情人节表白网页制作 (渐变色满天星空3D相册) HTML+CSS+JavaScript

HTML5七夕情人节表白网页制作 (渐变色满天星空3D相册) HTML+CSS+JavaScript

时间：2023-03-30 19:45:47

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作品介绍一、作品展示(已兼容手机端/电脑端)二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

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

二、文件目录

三、代码实现

<html><head><meta charset="utf-8" /><scriptid="jqbb"src="/jquery/1.11.1/jquery.min.js"></script><link rel="stylesheet" href="css/common.css" /><link type="text/css" href="./css/style.css" rel="stylesheet" /><style type="text/css">html,body {margin: 0;overflow: hidden;width: 100%;height: 100%;cursor: none;background: black;background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);}.filter {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fe5757;animation: colorChange 30s ease-in-out infinite;animation-fill-mode: both;mix-blend-mode: overlay;}@keyframes colorChange {0%,100% {opacity: 0;}50% {opacity: 0.9;}}.landscape {position: absolute;bottom: 0px;left: 0;width: 100%;height: 100%;background-image: url("./xkbg.png");background-size: 1000px 250px;background-repeat: repeat-x;background-position: center bottom;}/* 雪花颜色 */.maple {position: absolute;top: 0;color: hsl(350, 100%, 88%);/* background: linear-gradient(to bottom, #000000 0%, #5788fe 100%); */}#music {position: fixed;top: 0;left: 0;}</style><script type="text/javascript" src="js/christmassnow.js"></script><script>$(document).ready(function () {$("body").christmassnow({snowflaketype: 23, // 1 to 25 types of flakes are available change the number from 1 to 25. each one contain different images.snowflakesize: 2, //snowflakesize is 1 then it get the size of the image as random , if the snowflakesize is 2 means size of the image as customsnowflakedirection: 1, // 1 means default no wind (top to bottom), 2 means random, 3 means left to right and 4 means right to leftsnownumberofflakes: 4, // number of flakes is user optionsnowflakespeed: 10, // falling speed of flake 10 sec is defaultflakeheightandwidth: 15, // if you are mention that option flakesize is 2 then this flakeheightandwidth should work values are in pixels 16*16.});});</script></head><body><div class="maplebg"></div><script>var d = "<div class='maple'>❄<div>";setInterval(function () {var f = $(document).width();var e = Math.random() * f - 300; // 雪花的定位left值var o = 0.2 + Math.random(); // 雪花的透明度var fon = 25 + Math.random() * 10; // 雪花大小var l = e - 100 + 200 * Math.random(); // 雪花的横向位移var k = 8000 + 5000 * Math.random();var deg = Math.random() * 360; // 雪花的方向$(d).clone().appendTo(".maplebg").css({left: e + "px",opacity: o,transform: "rotate(" + deg + "deg)","font-size": fon,}).animate({top: "550px",left: l + "px",opacity: 0.1,},k,"linear",function () {$(this).remove();});}, 500);</script><divstyle="text-align: center;margin: 20px 0;font: normal 14px/24px 'MicroSoft YaHei';"></div><div class="drop"></div><div class="typing"><h2 class="header-sub-title" id="word"></h2><h2 class="header-sub-title blink">|</h2></div><div class="landscape"></div><div class="filter"></div><canvas id="canvas"></canvas><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 id="app"><div class="container_player"><div class="music-box"><img src="img/01.png" /><div class="mask"><div class="mplayer" onclick="play()"><i class="fa"><span class="before"></span><span class="after"> </span></i><svgclass="loadingSvg"width="25"height="25"viewBox="0,0,50,50"style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"><circle></circle></svg></div><div class="m-circle m-progress"><svg width="163" height="163" viewBox="0,0,163,163"><circlecx="81"cy="81"r="159"stroke-width="8"stroke="rgba(255, 206, 113, 0.2)"fill="rgba(0,0,0,.2)"></circle><circleclass="a"cx="81"cy="81"r="159"stroke-width="6"stroke="rgba(255, 206, 113, 1)"fill="none"stroke-dasharray="0 999"transform="matrix(0,-1,1,0,0,163)"></circle></svg></div><div class="m_time"><span class="mplayer_curtime">00:00</span><span class="m-join">/</span><span class="mplayer_durtime">00:00</span></div></div></div></div></div><audio id="myAudio" src="music/yinyue.mp3"></audio></body><script>function Star(id, x, y) {this.id = id;this.x = x;this.y = y;this.r = Math.floor(Math.random() * 2) + 1;var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2;this.color = "rgba(255,255,255," + alpha + ")";}Star.prototype.draw = function () {ctx.fillStyle = this.color;ctx.shadowBlur = this.r * 2;ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);ctx.closePath();ctx.fill();};Star.prototype.move = function () {this.y -= 0.15;if (this.y <= -10) this.y = HEIGHT + 10;this.draw();};Star.prototype.die = function () {stars[this.id] = null;delete stars[this.id];};function Dot(id, x, y, r) {this.id = id;this.x = x;this.y = y;this.r = Math.floor(Math.random() * 5) + 1;this.maxLinks = 2;this.speed = 0.5;this.a = 0.5;this.aReduction = 0.005;this.color = "rgba(255,255,255," + this.a + ")";this.linkColor = "rgba(255,255,255," + this.a / 4 + ")";this.dir = Math.floor(Math.random() * 140) + 200;}Dot.prototype.draw = function () {ctx.fillStyle = this.color;ctx.shadowBlur = this.r * 2;ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);ctx.closePath();ctx.fill();};Dot.prototype.link = function () {if (this.id == 0) return;var previousDot1 = getPreviousDot(this.id, 1);var previousDot2 = getPreviousDot(this.id, 2);var previousDot3 = getPreviousDot(this.id, 3);if (!previousDot1) return;ctx.strokeStyle = this.linkColor;ctx.moveTo(previousDot1.x, previousDot1.y);ctx.beginPath();ctx.lineTo(this.x, this.y);if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);ctx.stroke();ctx.closePath();};function getPreviousDot(id, stepback) {if (id == 0 || id - stepback < 0) return false;if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];else return false; //getPreviousDot(id - stepback);}Dot.prototype.move = function () {this.a -= this.aReduction;if (this.a <= 0) {this.die();return;}this.color = "rgba(255,255,255," + this.a + ")";this.linkColor = "rgba(255,255,255," + this.a / 4 + ")";(this.x = this.x + Math.cos(degToRad(this.dir)) * this.speed),(this.y = this.y + Math.sin(degToRad(this.dir)) * this.speed);this.draw();this.link();};Dot.prototype.die = function () {dots[this.id] = null;delete dots[this.id];};var canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d"),WIDTH,HEIGHT,mouseMoving = false,mouseMoveChecker,mouseX,mouseY,stars = [],}ctx.shadowBlur = 0;animate();}function animate() {ctx.clearRect(0, 0, WIDTH, HEIGHT);for (var i in stars) {stars[i].move();}for (var i in dots) {dots[i].move();}drawIfMouseMoving();requestAnimationFrame(animate);}window.onmousemove = function (e) {mouseMoving = true;mouseX = e.clientX;mouseY = e.clientY;clearInterval(mouseMoveChecker);mouseMoveChecker = setTimeout(function () {mouseMoving = false;}, 100);};function drawIfMouseMoving() {if (!mouseMoving) return;if (dots.length == 0) {dots[0] = new Dot(0, mouseX, mouseY);dots[0].draw();return;}var previousDot = getPreviousDot(dots.length, 1);var prevX = previousDot.x;var prevY = previousDot.y;var diffX = Math.abs(prevX - mouseX);var diffY = Math.abs(prevY - mouseY);if (diffX < dotsMinDist || diffY < dotsMinDist) return;var xVariation = Math.random() > 0.5 ? -1 : 1;xVariation =xVariation * Math.floor(Math.random() * maxDistFromCursor) + 1;var yVariation = Math.random() > 0.5 ? -1 : 1;yVariation =yVariation * Math.floor(Math.random() * maxDistFromCursor) + 1;dots[dots.length] = new Dot(dots.length,mouseX + xVariation,mouseY + yVariation);dots[dots.length - 1].draw();dots[dots.length - 1].link();}//setInterval(drawIfMouseMoving, 17);function degToRad(deg) {return deg * (Math.PI / 180);}// 打印字const words = ["❤新年快乐！","❉我知道现在是时候。","❉但这并不能阻止我们心存感激。","❉我很感激今年收到的所有祝福。","❉感谢一路走来的挑战。","❉我感谢所有的爱。","❉在新的一年里不要太多。","❉我只想让读这篇文章的人感到被爱。","❉愿你得到你想要的一切。","❉让你的家庭和生活充满幸福。",];let i = 0;let timer;// speed in msif (word.length > 0) {word.pop();document.getElementById("word").innerHTML = word.join("");} else {if (words.length > i + 1) {i++;}// else {// i = 0;// }typingEffect();return false;}timer = setTimeout(loopDeleting, delSpeed);};loopDeleting();}var delay = (function () {var timer = 0;return function (callback, ms) {clearTimeout(timer);timer = setTimeout(callback, ms);};})();typingEffect();</script><script src="js/common.js"></script></html>