夜雨聆風
簡單的愛心跳動表白網(wǎng)頁(附源碼)
一、準備工作
在開始之前，確保已經(jīng)具備基礎(chǔ)的 HTML、CSS 和 JavaScript 知識。同時，也要準備好一個代碼編輯器，比如 VS Code 或 Sublime Text。接下來，我們需要創(chuàng)建三個文件：index.html、styles.css 和 script.js。
具體實現(xiàn)效果如下
二：構(gòu)建 HTML 結(jié)構(gòu)
接下來，我們來編寫網(wǎng)頁的基本結(jié)構(gòu)。在 index.html 文件中，添加以下代碼：
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
? ? <meta charset=”UTF-8″>
? ? <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
? ? <link rel=”stylesheet” href=”styles.css”>
? ? <title>表白網(wǎng)頁</title>
</head>
<body>
? ? <div class=”container”>
? ? ? ? <div class=”heart”></div>
? ? ? ? <div class=”message”>我愛你??</div>
? ? ? ? <button class=”love-button”>點擊我</button>
? ? ? ? <div class=”footer”>
? ? ? ? ? ? <p>給你最甜蜜的告白~</p>
? ? ? ? </div>
? ? </div>
? ? <script src=”script.js”></script>
</body>
</html>
在這里，我們創(chuàng)建了一個容器 <div class=”container”>，其中包括一個表示心形的 <div class=”heart”>、一條簡短的表白信息，以及一個按鈕來增加用戶的互動。最后，我們還添加了一個腳注，給人一種甜蜜的結(jié)束感。
三：設(shè)計 CSS
接下去，我們來為我們的網(wǎng)頁設(shè)計美觀的樣式。打開 styles.css 文件，加入以下樣式：
body {
? ? display: flex;
? ? justify-content: center;
? ? align-items: center;
? ? height: 100vh;
? ? margin: 0;
? ? background: linear-gradient(135deg,?#ff7eb9,?#ff65a3);
? ? font-family: ‘Arial’, sans-serif;
}
.container {
? ? text-align: center;
}
.heart {
? ? position: relative;
? ? width: 100px;
? ? height: 100px;
? ? background: red;
? ? transform: rotate(-45deg);
? ? animation: jump 0.5s infinite alternate;
}
.heart::before,
.heart::after {
? ? content: ”;
? ? position: absolute;
? ? width: 100px;
? ? height: 100px;
? ? background: red;
? ? border-radius: 50%;
}
.heart::before {
? ? top: -50px;
? ? left: 0;
}
.heart::after {
? ? left: 50px;
? ? top: 0;
}
@keyframes jump {
? ? 0% { transform: translateY(0); }
? ? 100% { transform: translateY(-20px); }
}
.message {
? ? margin-top: 20px;
? ? font-size: 24px;
? ? color: white;
? ? animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
? ? from { opacity: 0; }
? ? to { opacity: 1; }
}
.love-button {
? ? margin-top: 30px;
? ? padding: 10px 20px;
? ? font-size: 16px;
? ? background-color: white;
? ? color: red;
? ? border: none;
? ? border-radius: 5px;
? ? cursor: pointer;
? ? transition: background-color 0.3s;
}
.love-button:hover {
? ? background-color: rgba(255, 255, 255, 0.8);
}
.footer {
? ? margin-top: 20px;
? ? font-size: 16px;
? ? color: white;
}
在這段 CSS 代碼中，我們設(shè)置了一個粉色漸變背景，并通過關(guān)鍵幀動畫使愛心跳動。表白信息通過淡入效果展示，增加了一份浪漫氣息。同時，我們還為按鈕增加了鼠標懸停效果，使其在用戶體驗上更加友好。
四：增加交互的 JavaScript
為了讓網(wǎng)頁更生動一些，我們可以在 script.js 中添加一些簡單的交互特效。以下代碼將實現(xiàn)點擊按鈕時，同樣彈出一個甜蜜的提示框：
document.querySelector(‘.heart’).addEventListener(‘click’, function() {
? ? alert(‘永遠愛你！’);
});
document.querySelector(‘.love-button’).addEventListener(‘click’, function() {
? ? alert(‘你的愛我永遠不放棄！’);
});
當用戶點擊愛心或按鈕時，都會彈出一個提示框，進一步表達你的愛意。借助這些簡單的 JavaScript 代碼，網(wǎng)頁將變得更加生動。
