大家好，我是小周，明天就是七夕了，這么浪漫的節(jié)日，自然少不了我這個(gè)浪漫博主，本次為大家貢獻(xiàn)表白信封的制作，其他的就看緣分啦，哈哈，最后會(huì)放上資源包，需要的小伙伴自取就可以了，999
一、畫(huà)信封
https://excalidraw.com/
使用上面的畫(huà)圖工具，手繪信封，可自己發(fā)揮，工具上手簡(jiǎn)單也很不錯(cuò)
圖1：未打開(kāi)的信封
圖2：快要打開(kāi)的信封
圖3：打開(kāi)的信封
二、結(jié)構(gòu)搭建
這是整個(gè)項(xiàng)目的結(jié)構(gòu)，其中都標(biāo)注了是干嘛的，清晰明了
三、HTML結(jié)構(gòu)
很簡(jiǎn)單，使用一個(gè)大盒子包裹所有內(nèi)容，包括圖片，文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小劉 -> 小張</title>
<link rel="shortcut icon" href="./icon/icon.png" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="con">
<img src="./images/1.png" class="close" draggable="false">
<img src="./images/花.png" class="rose" draggable="false">
<h1>寫(xiě)給親愛(ài)的郁苗小姐</h1>
<span>2022-8-4</span>
</div>
<audio src="./audio/click.mp3" class="clickMusic"></audio>
<audio src="./audio/ADG - 我 去 宇 宙 偷 星 星，放 在 夜 里 等 你?.mp3" class="bgMusic"></audio>
<script src="./js/main.js"></script>
</body>
</html>
四、CSS美化
關(guān)鍵注釋已經(jīng)寫(xiě)在代碼中，使用了定義con相對(duì)于body定位，con內(nèi)元素相對(duì)于con定位，不會(huì)亂，同時(shí)使用flex布局減少居中相關(guān)代碼
/* 清除默認(rèn)樣式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 給body相對(duì)定位，讓con以body為標(biāo)準(zhǔn)進(jìn)行定位 */
body {
position: relative;
/* 設(shè)置最小高度為一整個(gè)視口的高度 */
min-height: 100vh;
}
/* 使用絕對(duì)定位，相對(duì)于body定位，居中
同時(shí)開(kāi)啟 flex布局，默認(rèn)x軸為主軸，使用
justify-content: center;即x軸居中 */
.con {
position: absolute;
bottom: 150px;
width: 500px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.con .close {
position: absolute;
bottom: 0px;
width: 100%;
}
.con .rose {
position: absolute;
bottom: 70px;
width: 50px;
height: 50px;
/* 玫瑰是要點(diǎn)的，設(shè)置鼠標(biāo)樣式為小手 */
cursor: pointer;
}
.con h1 {
position: absolute;
bottom: 170px;
font-size: 18px;
color: #444;
}
.con span {
position: absolute;
bottom: 140px;
font-size: 14px;
color: #666;
}
/* 清除audio可能的占位問(wèn)題 */
audio {
width: 0;
height: 0;
}
以下是簡(jiǎn)單美化后的效果：
五、JS注入靈魂
js也不難，獲取節(jié)點(diǎn)，操作節(jié)點(diǎn)，使用定時(shí)器的時(shí)間差來(lái)模仿定格動(dòng)畫(huà)，達(dá)到開(kāi)信封的效果，是不是很棒呢？注釋已經(jīng)寫(xiě)好了，如果你的基礎(chǔ)差，看著注釋也能明白哦
// 獲取閉合信封的圖片節(jié)點(diǎn)
let img1 = document.querySelector(".close");
// 獲取h1和span文字節(jié)點(diǎn)
let h1 = document.querySelector("h1");
let span = document.querySelector("span");
// 獲取點(diǎn)擊音效
let clickMusic = document.querySelector(".clickMusic");
// 獲取背景音樂(lè)
let bgMusic = document.querySelector(".bgMusic");
// 獲取玫瑰，后面添加點(diǎn)擊事件
let rose = document.querySelector(".rose");
// 添加點(diǎn)擊事件
rose.addEventListener("click", function () {
// 先隱藏h1和span
h1.style.display = "none";
span.style.display = "none";
setTimeout(function () {
// 播放拆信封的音效
clickMusic.play();
// 200毫秒后切換信封為第二張
img1.src = "./images/2.png";
}, 200);
setTimeout(function () {
// 800毫秒后切換信封為第三張
img1.src = "./images/3.png";
// 播放背景音樂(lè)
bgMusic.play();
}, 800);
})
六、媒體查詢，兼容移動(dòng)端，拿捏
使用簡(jiǎn)單媒體查詢，處理一下不同像素下的樣式，小伙伴可以根據(jù)自己情況優(yōu)化，我這里提供一下思路。
/* 媒體查詢，簡(jiǎn)單兼容手機(jī)端，起飛 */
@media screen and (max-width: 540px) {
.con {
width: 100vw;
}
.con .rose {
bottom: 60px;
}
.con h1 {
bottom: 150px;
}
.con span {
bottom: 120px;
}
}
七、發(fā)送，直接戀愛(ài)
最后希望大家不要為了談戀愛(ài)而談戀愛(ài)??，在沒(méi)有遇到真心喜歡的她他之前，充實(shí)自己，對(duì)自己好點(diǎn)，加油學(xué)技術(shù)，如果覺(jué)得博主說(shuō)的不錯(cuò)，記得點(diǎn)贊支持博主呀，我是小周，期待你的關(guān)注！??
八、源碼下載
https://wwb.lanzouj.com/iJ7gH08yaw1g文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-833474.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-833474.html
到了這里，關(guān)于七夕節(jié)，我用代碼制作了表白信封的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
