HTML+CSS【超浪漫的表白网页代码】不会编程也能制作送给女朋友的表白网站
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS【超浪漫的表白网页代码】不会编程也能制作送给女朋友的表白网站
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業： 【📚HTML5網頁期末作業 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (125套) 】
七夕來襲！是時候展現專屬于程序員的浪漫了！你打算怎么給心愛的人表達愛意？鮮花禮物？代碼表白？還是創意DIY？或者…無論那種形式，快來秀我們一臉吧！
📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ??1.視頻演示
- 🧩 2.圖片演示
- 四、💒 網站代碼
- 🧱HTML結構代碼
- 🏠JS代碼
- 五、🎁更多源碼
二、📚網站介紹
📒網站文件方面：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件；
📙網頁編輯方面：可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,3D動態效果,雪花飄落等等
（3）📄 js文件包含：頁面炫酷效果實現
三、🔗網站效果
??1.視頻演示
20-愛心雨(滿屏愛心飄落)
🧩 2.圖片演示
四、💒 網站代碼
🧱HTML結構代碼
<!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><style>body {overflow: hidden;margin: 0 auto;background: url('img/16.jpg') no-repeat;background-attachment: fixed;background-size: cover;-moz-background-size: cover;-webkit-background-size: cover;}.snowfall-flakes:before {content: "";/*絕對定位*/position: absolute;left: 0px;top: 0px;width: 10px;height: 16px;transform: rotate(-45deg);background-color: red;border-radius: 5px 5px 1px 1px;}.snowfall-flakes:after {content: "";/*激活偽元素的必要因素*/position: absolute;left: 0px;top: 0px;width: 10px;height: 16px;transform: translateX(4.3px) rotate(45deg);background-color: red;border-radius: 5px 5px 1px 1px;}</style></head><body><div class="wrap"></div><script type="text/javascript" src="js/jquery-3.1.1.min.js"></script><script type="text/javascript" src="js/snowfall.jquery.min.js"></script><script type="text/javascript">$(document).snowfall({flakeCount: 100,maxSpeed: 5});</script></body></html>🏠JS代碼
Date.now || (Date.now = function() {return (new Date).getTime()}),function() {"use strict";for (var t = ["webkit", "moz"], e = 0; e < t.length && !window.requestAnimationFrame; ++e) {var i = t[e];window.requestAnimationFrame = window[i + "RequestAnimationFrame"], window.cancelAnimationFrame = window[i + "CancelAnimationFrame"] || window[i + "CancelRequestAnimationFrame"]}if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {var s = 0;window.requestAnimationFrame = function(t) {var e = Date.now(),i = Math.max(s + 16, e);return setTimeout(function() {t(s = i)}, i - e)}, window.cancelAnimationFrame = clearTimeout}}(),function(t) {t.snowfall = function(e, i) {function s(s, n, a, o) {this.x = s, this.y = n, this.size = a, this.speed = o, this.step = 0, this.stepSize = h(1, 10) / 100, i.collection && (this.target = m[h(0, m.length - 1)]);var r = null;i.image ? (r = document.createElement("img"), r.src = i.image) : (r = document.createElement("div"), t(r).css({background: i.flakeColor})), t(r).attr({"class": "snowfall-flakes"}).css({width: this.size,height: this.size,position: i.flakePosition,top: this.y,left: this.x,fontSize: 0,zIndex: i.flakeIndex}), t(e).get(0).tagName === t(document).get(0).tagName ? (t("body").append(t(r)), e = t("body")) : t(e).append(t(r)), this.element = r, this.update = function() {if (this.y += this.speed, this.y > l - (this.size + 6) && this.reset(), this.element.style.top = this.y + "px", this.element.style.left = this.x + "px", this.step += this.stepSize, this.x += y === !1 ? Math.cos(this.step) : y + Math.cos(this.step), i.collection && this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y) {var t = this.target.element.getContext("2d"),e = this.x - this.target.x,s = this.y - this.target.y,n = this.target.colData;if (void 0 !== n[parseInt(e)][parseInt(s + this.speed + this.size)] || s + this.speed + this.size > this.target.height)if (s + this.speed + this.size > this.target.height) {for (; s + this.speed + this.size > this.target.height && this.speed > 0;) this.speed *= .5;t.fillStyle = "#fff", void 0 == n[parseInt(e)][parseInt(s + this.speed + this.size)] ? (n[parseInt(e)][parseInt(s + this.speed + this.size)] = 1, t.fillRect(e, s + this.speed + this.size, this.size, this.size)) : (n[parseInt(e)][parseInt(s + this.speed)] = 1, t.fillRect(e, s + this.speed, this.size, this.size)), this.reset()} else this.speed = 1, this.stepSize = 0, parseInt(e) + 1 < this.target.width && void 0 == n[parseInt(e) + 1][parseInt(s) + 1] ? this.x++ : parseInt(e) - 1 > 0 && void 0 == n[parseInt(e) - 1][parseInt(s) + 1] ? this.x-- : (t.fillStyle = "#fff", t.fillRect(e, s, this.size, this.size), n[parseInt(e)][parseInt(s)] = 1, this.reset())}(this.x + this.size > d - c || this.x < c) && this.reset()}, this.reset = function() {this.y = 0, this.x = h(c, d - c), this.stepSize = h(1, 10) / 100, this.size = h(100 * i.minSize, 100 * i.maxSize) / 100, this.element.style.width = this.size + "px", this.element.style.height = this.size + "px", this.speed = h(i.minSpeed, i.maxSpeed)}}function n() {for (r = 0; r < a.length; r += 1) a[r].update();f = requestAnimationFrame(function() {n()})}var a = [],o = {flakeCount: 35,flakeColor: "#ffffff",flakePosition: "absolute",flakeIndex: 999999,minSize: 1,maxSize: 2,minSpeed: 1,maxSpeed: 5,round: !1,shadow: !1,collection: !1,collectionHeight: 40,deviceorientation: !1},i = t.extend(o, i),h = function(t, e) {return Math.round(t + Math.random() * (e - t))};t(e).data("snowfall", this);var r = 0,l = t(e).height(),d = t(e).width(),c = 0,f = 0;if (i.collection !== !1) {var p = document.createElement("canvas");if (p.getContext && p.getContext("2d"))for (var m = [], w = t(i.collection), g = i.collectionHeight, r = 0; r < w.length; r++) {var u = w[r].getBoundingClientRect(),x = t("<canvas/>", {"class": "snowfall-canvas"}),z = [];if (u.top - g > 0) {t("body").append(x), x.css({position: i.flakePosition,left: u.left + "px",top: u.top - g + "px"}).prop({width: u.width,height: g});for (var v = 0; v < u.width; v++) z[v] = [];m.push({element: x.get(0),x: u.left,y: u.top - g,width: u.width,height: g,colData: z})}} else i.collection = !1}for (t(e).get(0).tagName === t(document).get(0).tagName && (c = 25), t(window).bind("resize", function() {l = t(e)[0].clientHeight, d = t(e)[0].offsetWidth}), r = 0; r < i.flakeCount; r += 1) a.push(new s(h(c, d - c), h(0, l), h(100 * i.minSize, 100 * i.maxSize) / 100, h(i.minSpeed, i.maxSpeed)));i.round && t(".snowfall-flakes").css({"-moz-border-radius": i.maxSize,"-webkit-border-radius": i.maxSize,"border-radius": i.maxSize}), i.shadow && t(".snowfall-flakes").css({"-moz-box-shadow": "1px 1px 1px #555","-webkit-box-shadow": "1px 1px 1px #555","box-shadow": "1px 1px 1px #555"});var y = !1;i.deviceorientation && t(window).bind("deviceorientation", function(t) {y = .1 * t.originalEvent.gamma}), n(), this.clear = function() {t(".snowfall-canvas").remove(), t(e).children(".snowfall-flakes").remove(), cancelAnimationFrame(f)}}, t.fn.snowfall = function(e) {return "object" == typeof e || void 0 == e ? this.each(function() {new t.snowfall(this, e)}) : "string" == typeof e ? this.each(function() {var e = t(this).data("snowfall");e && e.clear()}) : void 0}}(jQuery);五、🎁更多源碼
1.如果我的博客對你有幫助 請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、等!
📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻
總結
以上是生活随笔為你收集整理的HTML+CSS【超浪漫的表白网页代码】不会编程也能制作送给女朋友的表白网站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实战: 对GBDT(lightGBM)分
- 下一篇： 深信服上网行为管理AC识别不到Youtu