HTML5七夕情人节表白网页制作 (全屏爱心相册) HTML+CSS+JS
生活随笔
收集整理的這篇文章主要介紹了
HTML5七夕情人节表白网页制作 (全屏爱心相册) HTML+CSS+JS
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業： 【📚HTML5網頁期末作業 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (125套) 】
七夕來襲！是時候展現專屬于程序員的浪漫了！你打算怎么給心愛的人表達愛意？鮮花禮物？代碼表白？還是創意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動態效果,雪花飄落等等
（3）📄 js文件包含：頁面炫酷效果實現
三、🔗網站效果
??1.視頻演示
17-html5全屏七夕表白頁面滾動模板
🧩 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><script async src="http://c.cnzz.com/core.php"></script><link rel="stylesheet" href="css/all.min.css"> </head><body><div class="flowtime"><div class="ft-section section-1" data-id="section-1"><div id="/section-1/page-1" class="ft-page page-1" data-id="page-1"><p class="text1"><span id="text-75" contenteditable="true">晗晗</span> ? <span id="text-76" contenteditable="true">小宇</span> <span id="text-77" contenteditable="true">一生一世</span></p><p class="text2">請按鍵盤 "↓" <span id="text-78" contenteditable="true">開始傾聽我的表白</span></p></div><div id="/section-1/page-2" class="ft-page page-2" data-id="page-2"><p class="top-text" id="text-1" contenteditable="true">過去的張千一直是一個人生活，享受著孤獨，也憧憬著愛情。</p><img src='img/iali63.jpg' alt="過去的張千一直是一個人生活，享受著孤獨，也憧憬著愛情。" /></div><div id="/section-1/page-3" class="ft-page page-3 left-img" data-id="page-3"><h2 class="text" id="text-2" contenteditable="true">一個人的長廊</h2><img src='img/iali35.jpg' alt="一個人的長廊" /></div><div id="/section-1/page-4" class="ft-page page-4 full-img" data-id="page-4"><h2 class="center-text" id="text-3" contenteditable="true">一個人的山崗</h2><img src='img/iali6.jpg' alt="一個人的山崗" /></div></div><div class="ft-section section-2" data-id="section-2"><div id="/section-2/page-1" class="ft-page page-5 full-img" data-id="page-1"><h2 class="center-text" id="text-4" contenteditable="true">一個人的地鐵</h2><img src='img/iali19.jpg' alt="一個人的山崗" /></div><div id="/section-2/page-2" class="ft-page page-6" data-id="page-2"><h2 class="center-text" id="text-5" contenteditable="true">一個人的游樂場</h2><img src='img/iali29.jpg' alt="一個人的游樂場" /></div><div id="/section-2/page-3" class="ft-page page-7" data-id="page-3"><h3 id="text-6" contenteditable="true">但他依然樂觀，微笑著，等待著</h3><img src='img/iali60.jpg' alt="但他依然樂觀，微笑著，等待著" /></div><div id="/section-2/page-4" class="ft-page page-8 full-img" data-id="page-4"><h3 id="text-7" contenteditable="true">生活難免有風風雨雨</h3><img src='img/iali51.jpg' alt="生活難免有風風雨雨" /></div><div id="/section-2/page-5" class="ft-page page-9" data-id="page-5"><h3 id="text-8" contenteditable="true">他總是能夠輕松的應對</h3><img src='img/iali5.jpg' /></div><div id="/section-2/page-6" class="ft-page page-10" data-id="page-6"><h3 id="text-9" contenteditable="true">并且面帶陽光、自信的笑容</h3><img src='img/iali22.jpg' /></div></div><div class="ft-section section-3" data-id="section-3"><div id="/section-3/page-1" class="ft-page page-11 full-img" data-id="page-1"><h3 id="text-10" contenteditable="true">生活也不會總是一帆風順</h3><img src='img/iali24.jpg' /></div><div id="/section-3/page-2" class="ft-page page-12" data-id="page-2"><h3><span id="text-11" contenteditable="true">但他每次都能勇敢的面對</span><br /><span id="text-12" contenteditable="true">隨時準備接受生活的挑戰</span></h3><img src='img/iali25.jpg' /></div><div id="/section-3/page-3" class="ft-page page-13" data-id="page-3"><img src='img/iali64.jpg' alt='可是張千的愛情又在哪里呢？' /><h3 id="text-13" contenteditable="true">可是張千的愛情又在哪里呢？</h3></div><div id="/section-3/page-4" class="ft-page page-14 left-img" data-id="page-4"><h3 id="text-14" contenteditable="true">在鏡子里面嗎？他不敢相信</h3><img src='img/iali46.jpg' /></div><div id="/section-3/page-5" class="ft-page page-15 left-img" data-id="page-5"><h3><span id="text-15" contenteditable="true">他去問大樹，我的愛情在哪里？</span><br /><span id="text-16" contenteditable="true">大樹告訴他，也許就在你的前方</span></h3><img src='img/iali45.jpg' /></div><div id="/section-3/page-6" class="ft-page page-16 left-img" data-id="page-6"><h3><span id="text-17" contenteditable="true">于是，張千一個人繼續向前走</span><br /><span id="text-18" contenteditable="true">走在茫茫的雪地上</span></h3><img src='img/iali66.jpg' /></div><div id="/section-3/page-7" class="ft-page page-17 top-text" data-id="page-7"><h3 id="text-19" contenteditable="true">直到有一天張千與Yvonne相遇了</h3><img src='img/iali16.jpg' /></div></div><div class="ft-section section-4" data-id="section-4"><div id="/section-4/page-1" class="ft-page page-18 full-img" data-id="page-1"><p class="text" id="text-20" contenteditable="true">張千喜歡Yvonne，因為Yvonne的出現，張千臉上有了更加燦爛的笑容</p><img src='img/iali11.jpg' /></div><div id="/section-4/page-2" class="ft-page page-19" data-id="page-2"><h3 id="text-21" contenteditable="true">可是Yvonne會喜歡張千嗎？</h3><img src="img/iali75.jpg" /></div><div id="/section-4/page-3" class="ft-page page-20" data-id="page-3"><img src='img/iali59.png' /><h3 id="text-22" contenteditable="true">終于有一天，張千鼓起了勇氣</h3><img src='img/iali9.jpg' /></div><div id="/section-4/page-4" class="ft-page page-21" data-id="page-4"><h3 id="text-23" contenteditable="true">張千好高興</h3><img src='img/iali59.png' /></div><div id="/section-4/page-5" class="ft-page page-22 left-img" data-id="page-5"><h3 id="text-24" contenteditable="true">每天張千都會跟Yvonne聊天</h3><img src='img/iali4.jpg' /></div><div id="/section-4/page-6" class="ft-page page-23 left-img" data-id="page-6"><h3 id="text-25" contenteditable="true">然后兩個人一起憧憬未來</h3><img src='img/iali44.jpg' /></div><div id="/section-4/page-7" class="ft-page page-24 full-img" data-id="page-7"><h3 id="text-26" contenteditable="true">一起想象以后在一起的日子</h3><img src='img/iali32.jpg' /></div></div><div class="ft-section section-5" data-id="section-5"><div id="/section-5/page-1" class="ft-page page-25 left-img" data-id="page-1"><h3><span id="text-27" contenteditable="true">從今開始</span><br /><span id="text-28" contenteditable="true">張千上班都是開心的</span></h3><img src='img/iali37.jpg' /></div><div id="/section-5/page-2" class="ft-page page-26 top-text" data-id="page-2"><h3 id="text-29" contenteditable="true">每次高興地進入夢鄉，都會夢到Yvonne</h3><img src='img/iali10.gif' /></div><div id="/section-5/page-3" class="ft-page page-27" data-id="page-3"><h3 id="text-30" contenteditable="true">曾經一段時間張千就成為了Yvonne的逛街助手</h3><img src='img/iali67.jpg' /></div><div id="/section-5/page-4" class="ft-page page-28" data-id="page-4"><h3 id="text-31" contenteditable="true">張千和Yvonne一起去了好多地方玩</h3><img src='img/iali40.jpg' /></div><div id="/section-5/page-5" class="ft-page page-29" data-id="page-5"><h3 id="text-32" contenteditable="true">張千也和Yvonne一樣成為了一個吃貨</h3><img src='img/iali12.jpg' /></div><div id="/section-5/page-6" class="ft-page page-30" data-id="page-6"><h3 id="text-33" contenteditable="true">后來，他們搬到了一起</h3><img src='img/iali76.gif' /></div><div id="/section-5/page-7" class="ft-page page-31" data-id="page-7"><h3 id="text-34" contenteditable="true">于是張千開始學習新的技能</h3><img src='img/iali77.jpg' /></div></div><div class="ft-section section-6" data-id="section-6"><div id="/section-6/page-1" class="ft-page page-32" data-id="page-1"><h3 id="text-35" contenteditable="true">煮飯</h3><img src='img/iali62.jpg' /></div><div id="/section-6/page-2" class="ft-page page-33 top-text" data-id="page-2"><h3 id="text-36" contenteditable="true">每天早上，他們吃著自己做的美食</h3><img src='img/iali3.jpg' /></div><div id="/section-6/page-3" class="ft-page page-34 left-img" data-id="page-3"><h3 id="text-37" contenteditable="true">然后在同一個站臺，高高興興的一起出去</h3></div><div id="/section-6/page-4" class="ft-page page-35" data-id="page-4"><h3><span id="text-38" contenteditable="true">張千感覺自己好幸福。</span><br /><span id="text-39" contenteditable="true">因為自己有了家</span><br /><span id="text-40" contenteditable="true">那個有Yvonne在的地方</span></h3><img src='img/iali8.gif' /></div><div id="/section-6/page-5" class="ft-page page-36 full-img" data-id="page-5"><h3 id="text-41" contenteditable="true">他們偶爾也會吵架</h3><img src='img/iali31.jpg' /></div><div id="/section-6/page-6" class="ft-page page-37 left-img" data-id="page-6"><h3 id="text-42" contenteditable="true">張千不想這樣</h3><img src='img/iali49.jpg' /></div><div id="/section-6/page-7" class="ft-page page-38 bottom-text" data-id="page-7"><img src='img/iali21.jpg' /><h3 id="text-43" contenteditable="true">一定是我有什么做的不對，張千在想</h3></div></div><div class="ft-section section-7" data-id="section-7"><div id="/section-7/page-1" class="ft-page page-39 left-img" data-id="page-1"><h3 id="text-44" contenteditable="true">如果沒有Yvonne在身邊，窗外就沒有風景</h3><img src='img/iali2.jpg' /></div><div id="/section-7/page-2" class="ft-page page-40" data-id="page-2"><h3 id="text-45" contenteditable="true">如果沒有Yvonne在身后</h3><img src='img/iali14.jpg' /></div><div id="/section-7/page-3" class="ft-page page-41" data-id="page-3"><img src='img/iali30_1.jpg' class='img1' /><img src='img/iali30_2.jpg' class='img2' /><h3 id="text-46" contenteditable="true"> 張千又怎會飛的更高更遠</h3></div><div id="/section-7/page-4" class="ft-page page-42" data-id="page-4"><h3><span id="text-47" contenteditable="true">張千不想這樣。他要為Yvonne改變自己</span><br /><span id="text-48" contenteditable="true">Yvonne說她喜歡喜歡幫助他們家的人，于是張千許下愿望</span></h3><img src='img/iali69.jpg' /></div><div id="/section-7/page-5" class="ft-page page-43" data-id="page-5"><img src='img/iali42.jpg' /><h3 id="text-49" contenteditable="true">我愿為你變成什么都會修的人</h3></div><div id="/section-7/page-6" class="ft-page page-44 left-img" data-id="page-6"><h3><span id="text-50" contenteditable="true">愛情就像花草一樣</span><br /><span id="text-51" contenteditable="true">需要用包容來澆灌</span></h3><img src='img/iali0.jpg' /></div><div id="/section-7/page-7" class="ft-page page-45 left-img" data-id="page-7"><h3><span id="text-52" contenteditable="true">張千很幸福，要過生日了</span><br /><span id="text-53" contenteditable="true">Yvonne開始為張千準備禮物</span></h3><img src='img/iali18.jpg' /></div></div><div class="ft-section section-8" data-id="section-8"><div id="/section-8/page-1" class="ft-page page-46" data-id="page-1"><img src='img/iali57.gif' /><h3><span id="text-54" contenteditable="true">看著禮物</span><span id="text-55" contenteditable="true">張千好開心</span><span id="text-56" contenteditable="true">因為他知道她對他的心意</span><span id="text-57" contenteditable="true">可惜的是張千沒有送給Yvonne過</span></h3></div><div id="/section-8/page-2" class="ft-page page-47 top-text" data-id="page-2"><img src='img/iali58.jpg' /><h3><span id="text-58" contenteditable="true">想想后面還有一輩子</span><span id="text-59" contenteditable="true">張千好開心</span><span id="text-60" contenteditable="true">因為可以和她</span><span id="text-61" contenteditable="true">去全世界好多地方玩</span></h3></div><div id="/section-8/page-3" class="ft-page page-48 left-img" data-id="page-3"><p><span id="text-62" contenteditable="true">張千也會繼續努力</span><br /><span id="text-63" contenteditable="true">為了他和Yvonne的夢之城堡</span></p><img src='img/iali65.jpg' /></div><div id="/section-8/page-4" class="ft-page page-49 full-img" data-id="page-4"><img src='img/iali71.jpg' /><p class="text"><span class='text' id="text-64" contenteditable="true">張千很幸福，因為他找到了Yvonne。他相信后面的每天都會是快樂的</span><br /><span class='text' id="text-65" contenteditable="true">簡簡單單，體會著與Yvonne在一起的每一個刻</span></p></div><div id="/section-8/page-5" class="ft-page page-50" data-id="page-5"><p class='text' id="text-66" contenteditable="true">后來的一天，Yvonne說他不喜歡他抽煙，于是張千就拼了命的戒煙。這只是他們幸福生活中的一件小事，小到無法引起別人的注意。可這是屬于張千和Yvonne的幸福生活。</p><img src='img/iali50_1.jpg' class='img1' /><img src='img/iali50_2.jpg' class='img2' /></div><div id="/section-8/page-6" class="ft-page page-51" data-id="page-6"><p><span id="text-67" contenteditable="true">Yvonne：永遠有多遠？</span><br /><span id="text-68" contenteditable="true">張千：比時間多一秒就是永遠，我會永遠愛你</span><br /><span id="text-69" contenteditable="true">Yvonne：世界有多大？</span><br /><span id="text-70" contenteditable="true">張千：你走到哪里，世界就有多大</span></p></div></div><div class="ft-section section-9" data-id="section-9"><div id="/section-9/page-1" class="ft-page page-52 full-img" data-id="page-1"><h3 id="text-71" contenteditable="true">愿得一人心，白首不相離</h3><img src='img/iali20.jpg' /></div><div id="/section-9/page-2" class="ft-page page-53" data-id="page-2"><img src='img/iali68.jpg' alt='happy birthday' /><h3 id="text-72" contenteditable="true">情人節快樂</h3></div><div id="/section-9/page-3" class="ft-page page-54 center-img" data-id="page-3"><div class="center-img">I love you</div></div><div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4"><img src='img/14915.jpg' /><p class="text"><span id="text-73" contenteditable="true">花花和pite的故事會一直繼續下去。</span><br /><span id="text-74" contenteditable="true">無論精彩、平淡都會是他們喜歡的。</span><br /><br /><br /><span> -- 按“Esc"鍵有驚喜</span></p></div></div></div><div class="nojavascript">您的瀏覽器版本太低或禁用了javascript，無法正常瀏覽本頁面</div></div><audio id="bgmMusic" src="music/saveme.mp3" autoplay="autoplay" loop preload="auto" type="audio/mp3"></audio><script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script src="js/all.min.js"></script><script src="js/love.min.js"></script><div class="mPower"><span id="on" title="點擊暫停"></span><span id="off" title="點擊播放"></span></div> </body></html>🏠CSS樣式代碼
.ft-fragment.revealed, .ft-fragment.revealed-temp, .ft-fragment.revealed.actual {opacity: 1 }.ft-default-progress {position: fixed;bottom: 16px;bottom: 1rem;right: 16px;right: 1rem;z-index: 1000;opacity: .3;-o-transition: all .5s cubic-bezier(.77, .10, .22, 1);-moz-transition: all .5s cubic-bezier(.77, .10, .22, 1);-webkit-transition: all .5s cubic-bezier(.77, .10, .22, 1);transition: all .5s cubic-bezier(.77, .10, .22, 1) }.ft-default-progress:hover {opacity: 1 }.ft-overview .ft-default-progress {opacity: 0;pointer-events: none }.ft-page-thumb {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;width: 18px;height: 12px;margin-right: 1px;margin-bottom: 1px;background-color: rgba(0, 0, 0, 0.7);cursor: pointer;-o-transition: all .3s cubic-bezier(.77, .10, .22, 1);-moz-transition: all .3s cubic-bezier(.77, .10, .22, 1);-webkit-transition: all .3s cubic-bezier(.77, .10, .22, 1);transition: all .3s cubic-bezier(.77, .10, .22, 1) }.ft-page-thumb:hover {background-color: rgba(255, 255, 255, 0.7) }.ft-page-thumb.actual {background-color: rgba(255, 255, 255, 0.5);border: 1px solid #fff }img {-o-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-o-backface-visibility: hidden;-ms-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden }.parallax {position: relative;-o-transition: all .5s cubic-bezier(.50, .10, .50, 1);-moz-transition: all .5s cubic-bezier(.50, .10, .50, 1);-webkit-transition: all .5s cubic-bezier(.50, .10, .50, 1);transition: all .5s cubic-bezier(.50, .10, .50, 1) }.ft-overview .parallax {-o-transform: translate3d(0, 0, 0) !important;-ms-transform: translate3d(0, 0, 0) !important;-moz-transform: translate3d(0, 0, 0) !important;-webkit-transform: translate3d(0, 0, 0) !important;transform: translate3d(0, 0, 0) !important }@font-face {font-family: 'RuiHeiXiTi';src: url('../fonts/RuiHeiXiTi.otf') format('truetype');font-weight: bold;font-style: normal }html {font-size: 100%;line-height: 1.5rem;background-color: #aaa;color: #6e2d52;text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4) }五、🎁更多源碼
1.如果我的博客對你有幫助 請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、等!
📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻
總結
以上是生活随笔為你收集整理的HTML5七夕情人节表白网页制作 (全屏爱心相册) HTML+CSS+JS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dna计算机量子计算,量子算法、DNA计
- 下一篇： Resources are low on