當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

不会写代码也可以, 手把手教你制作炫酷生日祝福网页(程序员专属情人节表白网站)

發(fā)布時間：2023/12/10 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了不会写代码也可以, 手把手教你制作炫酷生日祝福网页(程序员专属情人节表白网站) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業(yè)：【📚HTML5網頁期末作業(yè) (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網頁制作 (125套) 】
七夕來襲！是時候展現專屬于程序員的浪漫了！你打算怎么給心愛的人表達愛意？鮮花禮物？代碼表白？還是創(chuàng)意DIY？或者…無論那種形式，快來秀我們一臉吧！

📂文章目錄

二、📚網站介紹
三、🔗網站效果
- ??1.視頻演示
- 🧩 2.圖片演示
四、💒 網站代碼
- 🧱HTML結構代碼
- 🏠CSS樣式代碼
五、🎁更多源碼

二、📚網站介紹

📒網站文件方面：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件；

📙網頁編輯方面：可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,3D動態(tài)效果,雪花飄落等等
（3）📄 js文件包含：頁面炫酷效果實現

三、🔗網站效果

??1.視頻演示

108七夕動漫背景(煙花)3D相冊

🧩 2.圖片演示

四、💒 網站代碼

🧱HTML結構代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>七夕情人節(jié)- 動漫3D相冊告白</title><link rel="stylesheet" href="./css/common.css" /><link type="text/css" href="./css/style.css" rel="stylesheet" /><scriptid="jqbb"src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><style type="text/css">body {margin: 0;position: relative;}.raining {display: block;}/* 背景圖片 */.backimg {position: absolute;left: 0;top: 0;background: url(img/20.jpg);height: 100%;width: 100%;opacity: 0.3;}.audio {position: absolute;left: 0;top: 0;}</style> </head><body><canvas class="raining"></canvas><div class="typing"><h2 class="header-sub-title" id="word"></h2><h2 class="header-sub-title blink">|</h2></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="./azn.mp3" loop="loop" ></audio><div class="backimg"></div> </body> <script type="text/javascript" src="js/christmassnow.js"></script> <script src="js/common.js"></script> <script type="text/javascript"> $(document).ready(function(){/* 自動播放音樂 */play() }) /* 煙花 */var canvas = document.querySelector(".raining");var w, h;~~ function setSize() { //定義canvas的寬高，讓他跟瀏覽器的窗口的寬高相同window.onresize = arguments.callee;w = window.innerWidth;h = window.innerHeight;canvas.width = w;canvas.height = h;}();var canCon = canvas.getContext("2d"); //建立2d畫板var arain = []; //新建數組,儲存雨滴//function random(min, max) { //返回最小值到最大值之間的值return Math.random() * (max - min) + min;}function rain() {};rain.prototype = {init: function() { //變量初始化this.x = random(0, w); //在0-w之間生成雨滴this.vx = 0.1;this.y = h; //起點在下面this.vy = random(4, 5);this.h = random(0.1 * h, 0.4 * h); //地板高度this.r = 1; //雨滴綻放的半徑this.vr = 1;this.colos = Math.floor(Math.random() * 1000);},draw: function() {if (this.y > this.h) {canCon.beginPath(); //拿起一支筆canCon.fillStyle = '#' + this.colos; //筆墨的顏色，隨機變化的顏色canCon.fillRect(this.x, this.y, 3, 10); //想象畫一個雨滴} else {canCon.beginPath(); //拿起一支筆canCon.strokeStyle = '#' + this.colos; //筆墨的顏色canCon.arc(this.x, this.y, this.r, 0, Math.PI * 2); //想象畫一個圓canCon.stroke(); //下筆作畫}},move: function() { //重點是判斷和初始位置。其他無大變化if (this.y > this.h) { //位置判斷this.y += -this.vy; //從下往上 } else {if (this.r < 100) { //綻放的大小this.r += this.vr;} else {this.init(); //放完后回歸變量原點}}this.draw(); //開始作畫}}function createrain(num) {for (var i = 0; i < num; i++) {setTimeout(function() {var raing = new rain(); //創(chuàng)建一滴雨raing.init();raing.draw();arain.push(raing);}, 800 * i) //每隔150ms下落一滴雨}}createrain(10); //雨滴數量setInterval(function() {canCon.fillStyle = "rgba(0,0,0,0.1)"; //拿起一支透明0.13的筆 canCon.fillRect(0, 0, w, h); //添加蒙版控制雨滴長度for (var item of arain) {//item of arain指的是數組里的每一個元素//item in arain指的是數組里的每一個元素的下標（包括圓形連上的可遍歷元素）item.move(); //運行整個move事件}}, 1000 / 60); //上升時間// -----------打印字-----------const words = ["?親愛的,今天是我們在一起的第520天","? 月梅星稀鳴蟬哀，胡琴曲幽誰人拉","? 今夜無人盈袖拂，時逢科舉緣是由","? 你的笑，我無法忘掉","? 你的好，溫暖我心潮","? 你的美，如秋月皎皎","? 我的愛，如秋水淼淼","? 陪著你一直到老","? 親愛的，七夕到了","? 陪著你度過生命中的每一個七夕",];let i = 0;let timer;// speed in mslet deleteDelay = 3000;let typeSpeed = 100;let delSpeed = 50;/* 開始編寫文字 */function typingEffect() {let word = words[i].split("");var loopTyping = function () {if (word.length > 0) {document.getElementById("word").innerHTML += word.shift();} else {delay(function () {deletingEffect(); // do stuff}, deleteDelay); // end delay// deletingEffect();return false;}timer = setTimeout(loopTyping, typeSpeed);};loopTyping();}function deletingEffect() {let word = words[i].split("");var loopDeleting = function () {if (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></html>

🏠CSS樣式代碼

* {margin: 0;padding: 0; }@font-face {font-family: gothamrnd-light;src: url(../font/GothamRnd-Light.otf); }/* html, body {font: 12px gothamrnd-light, 微軟雅黑;font-family: gothamrnd-light;color: #666;background-color: #272727;width: 100%;height: 100%;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: transparent;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; } */ #app { } .container_player {position: fixed;top: 5%;right: 5%;z-index: 999999999999999; }.music-box {width: 100px;height: 100px;border-radius: 50%;position: relative;overflow: hidden;display: block;margin: 0 auto 0; }.music-box img {width: 100%;border-radius: 50%;transition: all 0.36s ease;display: inline;animation: spin 46s infinite linear;animation-play-state: paused; }.music-box .mask {width: 79px;height: 79px;border-radius: 50%;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);position: absolute;background-color: rgba(0, 0, 0, 0.3);z-index: 999999999999 !important; }.mplayer {position: absolute;width: 40px;height: 40px;background-color: #ad986d;top: 50%;left: 50%;border-radius: 50%;transform: translate3d(-50%, -50%, 0);z-index: 999999999999 !important;cursor: pointer; }.mplayer i {background-color: #000;display: block;position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);width: 2px;height: 10px;margin-left: -2px;transition: 0.36s ease; }.fa {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);line-height: 10px; }.mplayer i .before {width: 0;height: 0;border-color: transparent transparent transparent #ad986d;display: inline-block;border-width: 4px 6px;border-style: solid;color: #ad986d;margin-left: 2px;border-width: 5px 8px;margin-top: 0;transition: 0.36s ease; }.mplayer i .before {border-left-color: #000; }.mplayer i .after {display: inline-block;width: 2px;height: 10px;opacity: 0;transition: 0.36s ease;border-left: 2px solid #000;border-right: 2px solid #000; }.loadingSvg circle {r: 7;stroke: rgba(0, 0, 0, 0.7);stroke-dasharray: 43.5;stroke-dashoffset: 43.5;cx: 12.5;cy: 12.5;stroke-width: 2;fill: none;/* z-index: 9999999; */ }.m-circle {position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);width: 163px;height: 163px;overflow: hidden;border-radius: 50%; } .m-circle svg {z-index: 99999999999999; }.m_time span {display: block;text-align: center; }.m_time .mplayer_curtime {font-size: 14px !important;padding-top: 0px;font-size: 8px;color: #e1be78 !important; }.m_time .m-join {display: none; }.m_time .mplayer_durtime {font-size: 12px;color: #ad986d; }.mplaying img {animation-play-state: running;-webkit-animation-play-state: running; }img {animation: spin 46s infinite linear;-webkit-animation: spin 46s infinite linear;animation-play-state: paused;-webkit-animation-play-state: paused; }.mplaying .mplayer i {margin-top: -8px;background-color: transparent; }.mplaying .mplayer i .before {opacity: 0; }.mplaying .mplayer i .after {opacity: 1; }.mplaying .loadingSvg circle {transition: 2s;stroke-dasharray: 43.5;stroke-dashoffset: 43.5;/* z-index: 9999999; */ }@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);} }@keyframes svgLoading {0% {stroke-dashoffset: 2;}100% {stroke-dashoffset: -39;} }

五、🎁更多源碼

1.如果我的博客對你有幫助請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業(yè)HTML模板、等!

📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻

總結

以上是生活随笔為你收集整理的不会写代码也可以, 手把手教你制作炫酷生日祝福网页(程序员专属情人节表白网站)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Element-UI中关于table表格
下一篇： Linux系统解决网络问题的笔记