當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

HTML5七夕520情人节表白网页❤ 属于我们的浪漫星空 ❤ HTML+CSS+JavaScript

發布時間：2023/12/14 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5七夕520情人节表白网页❤ 属于我们的浪漫星空 ❤ HTML+CSS+JavaScript 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML5七夕情人節表白網頁? 屬于我們的浪漫星空 ? HTML+CSS+JavaScript

這是程序員表白系列中的100款網站表白之一，旨在讓任何人都能使用并創建自己的表白網站給心愛的人看。此波共有100個表白網站，可以任意修改和使用，源碼已上傳，演示網址如下。

🧡文章末尾-已經附上源碼下載地址

🧡作者主頁-更多源碼

🧡七夕情人節專欄文章

作品介紹

1.網頁作品簡介 ：基于 HTML+CSS+JavaScript 制作七夕情人節表白網頁, 生日祝福, 七夕告白, 求婚, 浪漫愛情3D相冊,炫酷代碼 ,已經兼容手機端和電腦端, 快來制作一款高端的表白網頁送(他/她)生日祝福網頁,制作修改簡單, 需替換圖片和文字即可.可自行更換背景音樂。

2.網頁作品編輯：任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改網頁。

文章目錄

HTML5七夕情人節表白網頁? 屬于我們的浪漫星空 ? HTML+CSS+JavaScript
作品介紹
一、作品展示
二、文件目錄
三、代碼實現
四、學習資料
五、源碼下載
六、更多源碼

一、作品展示

二、文件目錄

三、代碼實現

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>魔幻粒子表白網頁</title><link rel="stylesheet" href="static/css/normalize.css"><link rel="stylesheet" href="static/css/style.css" media="screen" type="text/css" /> </head><body><canvas class="canvas"></canvas><div class="help" style="display:none;">?</div><div class="ui" style="display:none;"><input class="ui-input" type="text" /><span class="ui-return">?</span></div><div class="overlay"><div class="tabs"><div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div><div class="tabs-panels"><ul class="tabs-panel commands"></li></ul></div></div></div><script type="text/javascript">var S = {init: function() {var action = window.location.href,i = action.indexOf('?a=');S.Drawing.init('.canvas');document.body.classList.add('body--ready');if (i !== -1) {S.UI.simulate(decodeURI(action).substring(i + 3));} else {S.UI.simulate('#circle|親愛的|老婆大人|你即將成為|全世界|最幸福|的妻子。：|#countdown 5|#show', 3000);}S.Drawing.loop(function() {S.Shape.render();});}}function show() {window.location.href = "tiaozhuan/index.html";};S.Drawing = (function() {var canvas, context, renderFn {this.p = new S.Point({x: x,y: y,z: 5,a: 1,h: 0});this.e = 0.07;this.s = true;this.c = new S.Color(255, 255, 255, this.p.a);this.t = this.clone();this.q = [];};S.Dot.prototype = {clone: function() {return new S.Point({x: this.x,y: this.y,z: this.z,a: this.a,h: this.h});},_draw: function() {this.c.a = this.p.a;S.Drawing.drawCircle(this.p, this.c);},fx = x < fx ? x : fx;fy = y < fy ? y : fy;}x += gap;if (x >= shapeCanvas.width) {x = 0;y += gap;p += gap * 4 * shapeCanvas.width;}}return {dots: dots,w: w + fx,h: h + fy};}function setFontSize(s) {shapeContext.font = 'bold ' + s + 'px ' + fontFamily;}function isNumber(n) {return !isNaN(parseFloat(n)) && isFinite(n);}function init() {fit();window.addEventListener('resize', fit);}init();return {imageFile: function(url, callback) {var image = new Image();var a = S.Drawing.getArea();image.onload = function() {shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);callback(processCanvas());};image.onerror = function() {callback(S.ShapeBuilder.letter('What?'));}image.src = url;},circle: function(d) {var r = Math.max(0, d) / 2;shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);shapeContext.beginPath();shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);shapeContext.fill();shapeContext.closePath();return processCanvas();},letter: function(l) {var s = 0;setFontSize(fontSize);s = Math.min(fontSize, (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);} else {dots[d].move(new S.Point({z: Math.random() * 5 + 5,h: fast ? 18 : 30}));}dots[d].s = true;dots[d].move(new S.Point({x: n.dots[i].x + cx,y: n.dots[i].y + cy,a: 1,z: 5,h: 0}));n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));d++;}for (var i = d; i < dots.length; i++) {if (dots[i].s) {dots[i].move(new S.Point({z: Math.random() * 20 + 10,a: Math.random(),h: 20}));dots[i].s = false;dots[i].e = 0.04;dots[i].move(new S.Point({x: Math.random() * a.w,y: Math.random() * a.h,a: 0.3,z: Math.random() * 4,h: 0}));}}},render: function() {for (var d = 0; d < dots.length; d++) {dots[d].render();}}}}());S.init();</script><div style="display:none"><div class="no-mobile"><div id="left_layer" style="position:fixed; top:150px; left:0px;"><script type="text/javascript" src="static/js/au-oou.js"></script></div><style>.no-mobile {display: none}@media(min-width:960px) {.no-mobile {display: inline}}</style></div><div class="no-mobile1"><div id="left_layer1" style="position:fixed; bottom:0px; right:0px;"><script type="text/javascript" src="static/js/a.js"></script></div><style>.no-mobile1 {display: none}@media(min-width:960px) {.no-mobile1 {display: inline}}</style></div><div class="no-pc"><script type="text/javascript" src="static/js/nv-l.js"></script><style>.no-pc {display: inline}@media(min-width:960px) {.no-pc {display: none}}</style></div><div class="no-pc"><script type="text/javascript" src="static/js/nv-l.js"></script><style>.no-pc {display: inline;}@media (min-width: 960px) {.no-pc {display: none;}}</style></div></div> </body></html>

四、學習資料

web前端零基礎-入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站

五、源碼下載

【百度網盤-完整源碼下載地址↓】

鏈接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取碼：8888

六、更多源碼

?100款表白網頁演示地址

?100款表白網頁在線視頻演示

總結

以上是生活随笔為你收集整理的HTML5七夕520情人节表白网页❤ 属于我们的浪漫星空 ❤ HTML+CSS+JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：深信服上网行为管理开启snmp_华为路由
下一篇：深信服上网行为管理开启snmp_SANG