国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 情人節(jié)程序員用HTML網(wǎng)頁(yè)表白【制作浪漫氣球520告白相冊(cè)】 HTML5七夕情人節(jié)表白

情人節(jié)程序員用HTML網(wǎng)頁(yè)表白【制作浪漫氣球520告白相冊(cè)】 HTML5七夕情人節(jié)表白

時(shí)間：2023-07-26 14:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-26 14:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

情人節(jié)程序員用HTML網(wǎng)頁(yè)表白【制作浪漫氣球520告白相冊(cè)】 HTML5七夕情人節(jié)表白網(wǎng)頁(yè)源碼 HTML+CSS+JavaScript：
這是程序員表白系列中的100款網(wǎng)站表白之一，旨在讓任何人都能使用并創(chuàng)建自己的表白網(wǎng)站給心愛(ài)的人看。 此波共有100個(gè)表白網(wǎng)站，可以任意修改和使用，很多人會(huì)希望向心愛(ài)的男孩女孩告白，生性靦腆的人即使那個(gè)TA站在眼前都不敢向前表白。說(shuō)不出口的話就用網(wǎng)頁(yè)告訴TA吧~制作一個(gè)表白網(wǎng)頁(yè)告訴TA你的心意,演示如下。
@TOC

一、網(wǎng)頁(yè)介紹

1 網(wǎng)頁(yè)簡(jiǎn)介：基于 HTML+CSS+JavaScript 制作七夕情人節(jié)表白網(wǎng)頁(yè)、生日祝福、七夕告白、 求婚、浪漫愛(ài)情3D相冊(cè)、炫酷代碼 ,快來(lái)制作一款高端的表白網(wǎng)頁(yè)送(他/她)浪漫的告白,制作修改簡(jiǎn)單,可自行更換背景音樂(lè),文字和圖片即可使用

2.網(wǎng)頁(yè)編輯：任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。

一、網(wǎng)頁(yè)效果




在這里插入圖片描述






在這里插入圖片描述



二、代碼展示

1.HTML代碼

代碼如下（示例）：以下僅展示部分代碼供參考~

<!-- * @Author: your name * @Date: 2021-07-07 09:34:19 * @LastEditTime: 2021-07-21 16:13:21 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: /css3氣球動(dòng)畫制作空中飄浮氣球動(dòng)畫特效/index.html--><!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無(wú)標(biāo)題文檔</title> <link href="css/index.css" rel="stylesheet" type="text/css" /></head><body> <div class="qiqiu1 qiqiu"> <img src="images/201101asdsaf22135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu2 qiqiu"> <img src="images/201101ddd22135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu3 qiqiu"> <img src="images/20110122135aaaaa412367.png" /> <div class="text">love</div> </div> <div class="qiqiu4 qiqiu"> <img src="images/20110122135s412367.png" /> <div class="text">love</div> </div> <div class="qiqiu5 qiqiu"> <img src="images/20110122135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu1 qiqiu"> <img src="images/201101asdsaf22135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu2 qiqiu"> <img src="images/201101ddd22135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu3 qiqiu"> <img src="images/20110122135aaaaa412367.png" /> <div class="text">love</div> </div> <div class="qiqiu4 qiqiu"> <img src="images/20110122135s412367.png" /> <div class="text">love</div> </div> <div class="qiqiu5 qiqiu"> <img src="images/20110122135412367.png" /> <div class="text">love</div> </div> <div class="yun1 yun"> </div> <div class="yun2 yun"> </div> <div class="yun3 yun"> </div> <div class="yun4 yun"> </div></body></html>

2.CSS代碼

@charset "utf-8";/* CSS Document */html { height: 100%}body { background: url(../images/bg.jpg) no-repeat center top; background-size: 100% 100%}.qiqiu { position: fixed; width: 100px; height: 200px;}.qiqiu div { /* width: 70px; */ /* height: 65px; */ /* background: url(../images/730e0cf3d7ca7bcbbc1b79c0bf096b63f724a8f9.png) no-repeat center center; */ background: url(../images/09.png) no-repeat center center; /* padding: 15px 5px 0; */ width: 160px; height: 160px; text-align: center; margin: 0 -27px; background-size: 100% auto;}.qiqiu img { width: 100%; height: auto; display: block;}.qiqiu1 { bottom: -200px; left: 400px; animation: myfirst 20s linear infinite; z-index: 2222; animation-delay: 0s; -webkit-animation: myfirst 20s linear infinite; z-index: 2222; -webkit-animation-delay: 0s;}.qiqiu2 { bottom: -200px; left: 650px; animation: myfirst2 22s 1s linear infinite; animation-delay: 2s; width: 70px; -webkit-animation: myfirst2 22s 1s linear infinite; -webkit-animation-delay: 2s;}.qiqiu3 { bottom: -200px; left: 900px; animation: myfirst3 22.2s linear infinite; z-index: 2222; animation-delay: 3s; -webkit-animation: myfirst3 22.2s linear infinite; -webkit-animation-delay: 3s;}.qiqiu4 { bottom: -200px; left: 1050px; animation: myfirst4 21s 0.2s linear infinite; z-index: 2222; animation-delay: 5s; -webkit-animation: myfirst4 21s 0.2s linear infinite; -webkit-animation-delay: 5s;}.qiqiu5 div { width: 100px; height: 100px; padding: 5px 5px 0; margin: 0 auto}.qiqiu2 div { width: 80px; height: 80px; padding: 5px 5px 0; margin: 0 auto}.qiqiu5 { bottom: -200px; left: 1250px; animation: myfirst5 19.5s 1.2s linear infinite; animation-delay: 4s; width: 60px;}.yun { position: fixed;}.yun1 { width: 567px; height: 185px; background: url(../images/yun1.png) no-repeat center center; left: 1060px; top: 318px; animation: myfirst6 50s linear infinite; -webkit-animation: myfirst6 50s linear infinite;}.yun2 { width: 605px; height: 253px; background: url(../images/yun2.png) no-repeat center center; left: 180px; top: 249px; animation: myfirst7 50s linear infinite; -webkit-animation: myfirst7 50s linear infinite;}.yun3 { width: 348px; height: 226px; background: url(../images/yun3.png) no-repeat center center; left: 50px; top: 500px; animation: myfirst8 50s linear infinite; -webkit-animation: myfirst8 50s linear infinite;}.yun4 { width: 786px; height: 362px; background: url(../images/yun4.png) no-repeat center center; left: 762px; top: 433px; animation: myfirst9 50s linear infinite; -webkit-animation: myfirst9 50s linear infinite;}@keyframes myfirst { from { bottom: -200px; } to { bottom: 800px; }}@keyframes myfirst2 { from { bottom: -200px; } to { bottom: 850px; }}@keyframes myfirst3 { from { bottom: -200px; } to { bottom: 820px; }}@keyframes myfirst4 { from { bottom: -200px; } to { bottom: 780px; }}@keyframes myfirst5 { from { bottom: -200px; } to { bottom: 830px; }}@keyframes myfirst6 { from { left: 1060px; } to { left: 1250px; }}@keyframes myfirst7 { from { left: 180px; } to { left: 400px; }}@keyframes myfirst8 { from { left: 50px; } to { left: 350px; }}@keyframes myfirst9 { from { left: 762px; } to { left: 1000px; }}@-webkit-keyframes myfirst { from { bottom: -200px; } to { bottom: 800px; }}@-webkit-keyframes myfirst2 { from { bottom: -200px; } to { bottom: 850px; }}@-webkit-keyframes myfirst3 { from { bottom: -200px; } to { bottom: 820px; }}@-webkit-keyframes myfirst4 { from { bottom: -200px; } to { bottom: 780px; }}@-webkit-keyframes myfirst5 { from { bottom: -200px; } to { bottom: 830px; }}@-webkit-keyframes myfirst6 { from { left: 1060px; } to { left: 1250px; }}@-webkit-keyframes myfirst7 { from { left: 180px; } to { left: 400px; }}@-webkit-keyframes myfirst8 { from { left: 50px; } to { left: 350px; }}@-webkit-keyframes myfirst9 { from { left: 762px; } to { left: 1000px; }}

三、精彩專欄

看到這里了就 【點(diǎn)贊，關(guān)注，收藏】 三連 支持下吧，你的支持是我創(chuàng)作的動(dòng)力。 【主頁(yè)—— 獲取更多優(yōu)質(zhì)源碼】

關(guān)鍵詞：表白,告白,七夕,相冊(cè),浪漫,程序,氣球

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉