情人節(jié)來(lái)臨，如何給愛(ài)人制造一個(gè)浪漫的驚喜？或許你可以通過(guò)一些簡(jiǎn)單的前端技術(shù)來(lái)創(chuàng)建一個(gè)屬于你們兩個(gè)的特別頁(yè)面。下面我們來(lái)看看如何用純CSS加JS來(lái)制作一個(gè)浪漫的情人節(jié)網(wǎng)頁(yè)。
<html>
<head>
<title>我的愛(ài)人節(jié)</title>
<style>
/*添加背景圖片，用心尺寸自適應(yīng) */
body {
background: url('love.jpg') no-repeat center fixed;
background-size: cover;
font-family: 'Montserrat', sans-serif;
}
/*添加心形圖案 */
.heart {
width: 50px;
height: 50px;
background-color: #d02f53;
position: relative;
animation: beat 1s infinite ease-in-out;
}
.heart:before,
.heart:after {
content: "";
background-color: #d02f53;
border-radius: 25px 25px 0 0;
position: absolute;
}
.heart:before {
height: 50px;
width: 50px;
top: -25px;
left: 0;
}
.heart:after {
height: 50px;
width: 50px;
top: 0;
left: 25px;
}
/*讓心形圖案背景與頁(yè)面不覆蓋*/
.heart-bg {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
opacity: 0.1;
}
/*創(chuàng)建跳動(dòng)的動(dòng)畫(huà)*/
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(0.6);
}
100% {
transform: scale(1);
}
}
</style>
<script>
/**
* 添加點(diǎn)擊事件，生成隨機(jī)的心形圖案
*/
document.addEventListener("click", function(e) {
var heart = document.createElement("div");
heart.classList.add("heart");
heart.style.left = e.clientX - 25 + "px";
heart.style.top = e.clientY - 25 + "px";
document.body.appendChild(heart);
setTimeout(function() {
heart.remove();
}, 1000);
});
</script>
</head>
<body>
<div class="heart-bg">
<img src="heart-bg.png" alt="heart-bg">
</div>
<h1>我的愛(ài)人節(jié)</h1>
<p>在這個(gè)特別的日子，送上我深深的愛(ài)意，并祝你快樂(lè)！</p>
</body>
</html>以上代碼中，我們首先通過(guò)CSS添加了背景圖片，并使用心形圖案作為頁(yè)面的亮點(diǎn)。之后，通過(guò)JS添加了點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊頁(yè)面時(shí)，會(huì)生成一個(gè)隨機(jī)位置的心形圖案，并在1s后從頁(yè)面上移除。這個(gè)過(guò)程中，我們也為心形圖案添加了一個(gè)跳動(dòng)的動(dòng)畫(huà)，讓頁(yè)面更加生動(dòng)。
這個(gè)情人節(jié)網(wǎng)頁(yè)雖然簡(jiǎn)單，但也充滿了濃濃的愛(ài)意，相信它會(huì)給你和你的愛(ài)人帶來(lái)愉快的回憶。祝大家情人節(jié)快樂(lè)！