設計思路
-
使用純CSS創建多種風格的愛心
-
添加平滑的動畫效果
-
實現交互式愛心生成器
-
響應式設計適應不同設備
-
優雅的UI布局和色彩方案
-
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>HTML愛心圖實戰</title>
? ? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
? ? ? ? }
? ? ? ??
? ? ? ? body {
? ? ? ? ? ? background: linear-gradient(135deg, #ffafbd, #ffc3a0);
? ? ? ? ? ? color: #5a2a2a;
? ? ? ? ? ? min-height: 100vh;
? ? ? ? ? ? padding: 20px;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? align-items: center;
? ? ? ? }
? ? ? ??
? ? ? ? header {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? padding: 30px 0;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? max-width: 1200px;
? ? ? ? }
? ? ? ??
? ? ? ? h1 {
? ? ? ? ? ? font-size: 2.8rem;
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? ? ? text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
? ? ? ? ? ? color: #7a1f1f;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? display: inline-block;
? ? ? ? }
? ? ? ??
? ? ? ? h1::after {
? ? ? ? ? ? content: "";
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? bottom: -10px;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? transform: translateX(-50%);
? ? ? ? ? ? width: 120px;
? ? ? ? ? ? height: 4px;
? ? ? ? ? ? background: linear-gradient(90deg, transparent, #ff5e7d, transparent);
? ? ? ? ? ? border-radius: 2px;
? ? ? ? }
? ? ? ??
? ? ? ? .subtitle {
? ? ? ? ? ? font-size: 1.2rem;
? ? ? ? ? ? max-width: 700px;
? ? ? ? ? ? margin: 20px auto;
? ? ? ? ? ? line-height: 1.6;
? ? ? ? ? ? color: #5a2a2a;
? ? ? ? }
? ? ? ??
? ? ? ? .container {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-wrap: wrap;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? gap: 40px;
? ? ? ? ? ? max-width: 1200px;
? ? ? ? ? ? margin: 20px auto;
? ? ? ? }
? ? ? ??
? ? ? ? .card {
? ? ? ? ? ? background: rgba(255, 255, 255, 0.85);
? ? ? ? ? ? border-radius: 20px;
? ? ? ? ? ? box-shadow: 0 10px 30px rgba(150, 50, 50, 0.2);
? ? ? ? ? ? padding: 25px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? max-width: 500px;
? ? ? ? ? ? transition: transform 0.3s ease;
? ? ? ? }
? ? ? ??
? ? ? ? .card:hover {
? ? ? ? ? ? transform: translateY(-10px);
? ? ? ? }
? ? ? ??
? ? ? ? .card h2 {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? margin-bottom: 20px;
? ? ? ? ? ? color: #d83f5d;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? gap: 10px;
? ? ? ? }
? ? ? ??
? ? ? ? .heart-container {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? min-height: 300px;
? ? ? ? ? ? margin: 20px 0;
? ? ? ? }
? ? ? ??
? ? ? ? /* 方法1：使用偽元素創建愛心 */
? ? ? ? .heart-1 {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: #ff5e7d;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? transform: rotate(-45deg);
? ? ? ? ? ? animation: beat-1 1.2s infinite;
? ? ? ? }
? ? ? ??
? ? ? ? .heart-1::before,
? ? ? ? .heart-1::after {
? ? ? ? ? ? content: "";
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: #ff5e7d;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ??
? ? ? ? .heart-1::before {
? ? ? ? ? ? top: -50px;
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? ? ??
? ? ? ? .heart-1::after {
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 50px;
? ? ? ? }
? ? ? ??
? ? ? ? /* 方法2：使用border-radius創建愛心 */
? ? ? ? .heart-2 {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: #ff3366;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? animation: beat-2 1.4s infinite;
? ? ? ? }
? ? ? ??
? ? ? ? .heart-2::before,
? ? ? ? .heart-2::after {
? ? ? ? ? ? content: "";
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: #ff3366;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? }
? ? ? ??
? ? ? ? .heart-2::before {
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: -50px;
? ? ? ? }
? ? ? ??
? ? ? ? .heart-2::after {
? ? ? ? ? ? top: -50px;
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? ? ??
? ? ? ? /* 方法3：使用CSS clip-path創建愛心 */
? ? ? ? .heart-3 {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 90px;
? ? ? ? ? ? background-color: #ff1493;
? ? ? ? ? ? clip-path: path("M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z");
? ? ? ? ? ? animation: beat-3 1.6s infinite;
? ? ? ? }
? ? ? ??
? ? ? ? /* 方法4：使用SVG創建愛心 */
? ? ? ? .heart-4 {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? animation: beat-4 1.8s infinite;
? ? ? ? }
? ? ? ??
? ? ? ? .heart-4 svg {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? ??
? ? ? ? /* 方法5：文字愛心 */
? ? ? ? .heart-5 {
? ? ? ? ? ? font-size: 100px;
? ? ? ? ? ? color: #ff5e7d;
? ? ? ? ? ? text-shadow: 0 0 20px rgba(255, 0, 85, 0.4);
? ? ? ? ? ? animation: beat-5 2s infinite;
? ? ? ? }
? ? ? ??
? ? ? ? /* 動畫效果 */
? ? ? ? @keyframes beat-1 {
? ? ? ? ? ? 0%, 100% { transform: rotate(-45deg) scale(1); }
? ? ? ? ? ? 50% { transform: rotate(-45deg) scale(1.1); }
? ? ? ? }
? ? ? ??
? ? ? ? @keyframes beat-2 {
? ? ? ? ? ? 0%, 100% { transform: scale(1); }
? ? ? ? ? ? 50% { transform: scale(1.1); }
? ? ? ? }
? ? ? ??
? ? ? ? @keyframes beat-3 {
? ? ? ? ? ? 0%, 100% { transform: scale(1); }
? ? ? ? ? ? 50% { transform: scale(1.15); }
? ? ? ? }
? ? ? ??
? ? ? ? @keyframes beat-4 {
? ? ? ? ? ? 0%, 100% { transform: scale(1); }
? ? ? ? ? ? 50% { transform: scale(1.12); }
? ? ? ? }
? ? ? ??
? ? ? ? @keyframes beat-5 {
? ? ? ? ? ? 0%, 100% { transform: scale(1); }
? ? ? ? ? ? 50% { transform: scale(1.2); }
? ? ? ? }
? ? ? ??
? ? ? ? .code-block {
? ? ? ? ? ? background: #2d2d2d;
? ? ? ? ? ? color: #f8f8f2;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? padding: 15px;
? ? ? ? ? ? margin-top: 20px;
? ? ? ? ? ? font-family: 'Courier New', monospace;
? ? ? ? ? ? font-size: 0.9rem;
? ? ? ? ? ? line-height: 1.5;
? ? ? ? ? ? overflow-x: auto;
? ? ? ? ? ? max-height: 200px;
? ? ? ? ? ? overflow-y: auto;
? ? ? ? }
? ? ? ??
? ? ? ? .generator {
? ? ? ? ? ? background: rgba(255, 255, 255, 0.85);
? ? ? ? ? ? border-radius: 20px;
? ? ? ? ? ? box-shadow: 0 10px 30px rgba(150, 50, 50, 0.2);
? ? ? ? ? ? padding: 30px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? max-width: 800px;
? ? ? ? ? ? margin: 40px auto;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ??
? ? ? ? .controls {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-wrap: wrap;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? gap: 20px;
? ? ? ? ? ? margin: 30px 0;
? ? ? ? }
? ? ? ??
? ? ? ? .control-group {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? align-items: center;
? ? ? ? }
? ? ? ??
? ? ? ? label {
? ? ? ? ? ? margin-bottom: 8px;
? ? ? ? ? ? font-weight: 500;
? ? ? ? ? ? color: #7a1f1f;
? ? ? ? }
? ? ? ??
? ? ? ? input[type="range"] {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? accent-color: #ff5e7d;
? ? ? ? }
? ? ? ??
? ? ? ? input[type="color"] {
? ? ? ? ? ? width: 60px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? border: none;
? ? ? ? ? ? border-radius: 8px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ??
? ? ? ? .generated-heart {
? ? ? ? ? ? margin: 30px auto;
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 150px;
? ? ? ? ? ? background-color: #ff5e7d;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? transform: rotate(-45deg);
? ? ? ? }
? ? ? ??
? ? ? ? .generated-heart::before,
? ? ? ? .generated-heart::after {
? ? ? ? ? ? content: "";
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 150px;
? ? ? ? ? ? background-color: inherit;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? }
? ? ? ??
? ? ? ? .generated-heart::before {
? ? ? ? ? ? top: -75px;
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? ? ??
? ? ? ? .generated-heart::after {
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 75px;
? ? ? ? }
? ? ? ??
? ? ? ? button {
? ? ? ? ? ? background: #ff5e7d;
? ? ? ? ? ? color: white;
? ? ? ? ? ? border: none;
? ? ? ? ? ? padding: 12px 25px;
? ? ? ? ? ? border-radius: 50px;
? ? ? ? ? ? font-size: 1rem;
? ? ? ? ? ? font-weight: 600;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? transition: all 0.3s ease;
? ? ? ? ? ? margin: 10px;
? ? ? ? ? ? box-shadow: 0 4px 15px rgba(255, 94, 125, 0.4);
? ? ? ? }
? ? ? ??
? ? ? ? button:hover {
? ? ? ? ? ? background: #ff3366;
? ? ? ? ? ? transform: translateY(-3px);
? ? ? ? ? ? box-shadow: 0 7px 20px rgba(255, 94, 125, 0.6);
? ? ? ? }
? ? ? ??
? ? ? ? footer {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? padding: 30px 0;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? max-width: 1200px;
? ? ? ? ? ? color: #5a2a2a;
? ? ? ? ? ? font-size: 1rem;
? ? ? ? ? ? margin-top: auto;
? ? ? ? }
? ? ? ??
? ? ? ? @media (max-width: 768px) {
? ? ? ? ? ? .container {
? ? ? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? ? ? align-items: center;
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? .card {
? ? ? ? ? ? ? ? max-width: 90%;
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? h1 {
? ? ? ? ? ? ? ? font-size: 2.2rem;
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? .controls {
? ? ? ? ? ? ? ? flex-direction: column;
? ? ? ? ? ? ? ? align-items: center;
? ? ? ? ? ? }
? ? ? ? }
? ? </style>
</head>
<body>
? ? <header>
? ? ? ? <h1><i class="fas fa-heart"></i> HTML愛心圖實戰</h1>
? ? ? ? <p class="subtitle">探索使用純CSS和HTML創建愛心的多種方法。從基礎形狀到高級技巧，學習如何實現各種風格的愛心及其動畫效果。</p>
? ? </header>
? ??
? ? <div class="container">
? ? ? ? <div class="card">
? ? ? ? ? ? <h2><i class="fas fa-shapes"></i> 偽元素方法</h2>
? ? ? ? ? ? <div class="heart-container">
? ? ? ? ? ? ? ? <div class="heart-1"></div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="code-block">
/* 使用兩個偽元素創建愛心 */
.heart {
? width: 100px;
? height: 100px;
? background-color: #ff5e7d;
? position: relative;
? transform: rotate(-45deg);
}.heart::before,
.heart::after {
? content: "";
? width: 100px;
? height: 100px;
? background-color: #ff5e7d;
? border-radius: 50%;
? position: absolute;
}.heart::before {
? top: -50px;
? left: 0;
}.heart::after {
? top: 0;
? left: 50px;
}</div>
? ? ? ? </div>
? ? ? ??
? ? ? ? <div class="card">
? ? ? ? ? ? <h2><i class="fas fa-border-style"></i> Border-radius方法</h2>
? ? ? ? ? ? <div class="heart-container">
? ? ? ? ? ? ? ? <div class="heart-2"></div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="code-block">
/* 使用border-radius創建愛心 */
.heart {
? width: 100px;
? height: 100px;
? background-color: #ff3366;
? position: relative;
}.heart::before,
.heart::after {
? content: "";
? position: absolute;
? width: 100px;
? height: 100px;
? background-color: #ff3366;
? border-radius: 50%;
}.heart::before {
? top: 0;
? left: -50px;
}.heart::after {
? top: -50px;
? left: 0;
}</div>
? ? ? ? </div>
? ? ? ??
? ? ? ? <div class="card">
? ? ? ? ? ? <h2><i class="fas fa-cut"></i> Clip-path方法</h2>
? ? ? ? ? ? <div class="heart-container">
? ? ? ? ? ? ? ? <div class="heart-3"></div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="code-block">
/* 使用CSS clip-path創建愛心 */
.heart {
? width: 100px;
? height: 90px;
? background-color: #ff1493;
? clip-path: path("M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z");
}</div>
? ? ? ? </div>
? ? ? ??
? ? ? ? <div class="card">
? ? ? ? ? ? <h2><i class="fas fa-code"></i> SVG方法</h2>
? ? ? ? ? ? <div class="heart-container">
? ? ? ? ? ? ? ? <div class="heart-4">
? ? ? ? ? ? ? ? ? ? <svg viewBox="0 0 32 29.6">
? ? ? ? ? ? ? ? ? ? ? ? <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
? ? ? ? ? ? ? ? ? ? ? ? c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="#ff5e7d"/>
? ? ? ? ? ? ? ? ? ? </svg>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="code-block">
<!-- 使用內聯SVG創建愛心 -->
<svg viewBox="0 0 32 29.6">
? <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
? c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="#ff5e7d"/>
</svg></div>
? ? ? ? </div>
? ? </div>
? ??
? ? <div class="generator">
? ? ? ? <h2><i class="fas fa-magic"></i> 愛心生成器</h2>
? ? ? ? <p>自定義您的愛心：調整大小、顏色和動畫速度</p>
? ? ? ??
? ? ? ? <div class="controls">
? ? ? ? ? ? <div class="control-group">
? ? ? ? ? ? ? ? <label for="size">尺寸: <span id="size-value">150px</span></label>
? ? ? ? ? ? ? ? <input type="range" id="size" min="50" max="300" value="150">
? ? ? ? ? ? </div>
? ? ? ? ? ??
? ? ? ? ? ? <div class="control-group">
? ? ? ? ? ? ? ? <label for="color">顏色</label>
? ? ? ? ? ? ? ? <input type="color" id="color" value="#ff5e7d">
? ? ? ? ? ? </div>
? ? ? ? ? ??
? ? ? ? ? ? <div class="control-group">
? ? ? ? ? ? ? ? <label for="speed">動畫速度: <span id="speed-value">正常</span></label>
? ? ? ? ? ? ? ? <input type="range" id="speed" min="0" max="10" value="5">
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ??
? ? ? ? <div class="heart-container">
? ? ? ? ? ? <div class="generated-heart" id="custom-heart"></div>
? ? ? ? </div>
? ? ? ??
? ? ? ? <button id="animate-btn"><i class="fas fa-play"></i> 播放動畫</button>
? ? ? ? <button id="reset-btn"><i class="fas fa-redo"></i> 重置</button>
? ? </div>
? ??
? ? <footer>
? ? ? ? <p>? 2023 HTML愛心圖實戰 | 使用純CSS和HTML創建 | 探索前端設計的藝術</p>
? ? ? ? <p>?? 讓愛在代碼中傳遞 ??</p>
? ? </footer>? ? <script>
? ? ? ? // 獲取DOM元素
? ? ? ? const sizeSlider = document.getElementById('size');
? ? ? ? const colorPicker = document.getElementById('color');
? ? ? ? const speedSlider = document.getElementById('speed');
? ? ? ? const customHeart = document.getElementById('custom-heart');
? ? ? ? const animateBtn = document.getElementById('animate-btn');
? ? ? ? const resetBtn = document.getElementById('reset-btn');
? ? ? ? const sizeValue = document.getElementById('size-value');
? ? ? ? const speedValue = document.getElementById('speed-value');
? ? ? ??
? ? ? ? // 更新尺寸顯示
? ? ? ? sizeSlider.addEventListener('input', function() {
? ? ? ? ? ? const size = this.value;
? ? ? ? ? ? sizeValue.textContent = `${size}px`;
? ? ? ? ? ??
? ? ? ? ? ? // 更新愛心尺寸
? ? ? ? ? ? customHeart.style.width = `${size}px`;
? ? ? ? ? ? customHeart.style.height = `${size}px`;
? ? ? ? ? ??
? ? ? ? ? ? // 更新偽元素尺寸
? ? ? ? ? ? const pseudoSize = `${size}px`;
? ? ? ? ? ? customHeart.style.setProperty('--pseudo-size', pseudoSize);
? ? ? ? ? ??
? ? ? ? ? ? // 更新偽元素位置
? ? ? ? ? ? const pseudoOffset = `${size / 2}px`;
? ? ? ? ? ? customHeart.style.setProperty('--pseudo-offset', pseudoOffset);
? ? ? ? });
? ? ? ??
? ? ? ? // 更新顏色
? ? ? ? colorPicker.addEventListener('input', function() {
? ? ? ? ? ? customHeart.style.backgroundColor = this.value;
? ? ? ? });
? ? ? ??
? ? ? ? // 更新速度顯示
? ? ? ? speedSlider.addEventListener('input', function() {
? ? ? ? ? ? const speed = this.value;
? ? ? ? ? ? let speedText;
? ? ? ? ? ??
? ? ? ? ? ? if (speed < 3) speedText = '慢速';
? ? ? ? ? ? else if (speed < 7) speedText = '正常';
? ? ? ? ? ? else speedText = '快速';
? ? ? ? ? ??
? ? ? ? ? ? speedValue.textContent = speedText;
? ? ? ? });
? ? ? ??
? ? ? ? // 動畫按鈕事件
? ? ? ? animateBtn.addEventListener('click', function() {
? ? ? ? ? ? const speed = speedSlider.value;
? ? ? ? ? ? const duration = 2 - (speed * 0.15); // 根據速度計算動畫時長
? ? ? ? ? ??
? ? ? ? ? ? customHeart.style.animation = `none`;
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? customHeart.style.animation = `beat ${duration}s infinite`;
? ? ? ? ? ? }, 10);
? ? ? ? });
? ? ? ??
? ? ? ? // 重置按鈕事件
? ? ? ? resetBtn.addEventListener('click', function() {
? ? ? ? ? ? // 重置滑塊和值
? ? ? ? ? ? sizeSlider.value = 150;
? ? ? ? ? ? colorPicker.value = '#ff5e7d';
? ? ? ? ? ? speedSlider.value = 5;
? ? ? ? ? ??
? ? ? ? ? ? // 更新顯示
? ? ? ? ? ? sizeValue.textContent = '150px';
? ? ? ? ? ? speedValue.textContent = '正常';
? ? ? ? ? ??
? ? ? ? ? ? // 重置愛心樣式
? ? ? ? ? ? customHeart.style.width = '150px';
? ? ? ? ? ? customHeart.style.height = '150px';
? ? ? ? ? ? customHeart.style.backgroundColor = '#ff5e7d';
? ? ? ? ? ? customHeart.style.animation = 'none';
? ? ? ? ? ??
? ? ? ? ? ? // 重置偽元素尺寸
? ? ? ? ? ? customHeart.style.setProperty('--pseudo-size', '150px');
? ? ? ? ? ? customHeart.style.setProperty('--pseudo-offset', '75px');
? ? ? ? });
? ? ? ??
? ? ? ? // 添加CSS動畫關鍵幀
? ? ? ? const style = document.createElement('style');
? ? ? ? style.textContent = `
? ? ? ? ? ? @keyframes beat {
? ? ? ? ? ? ? ? 0%, 100% { transform: rotate(-45deg) scale(1); }
? ? ? ? ? ? ? ? 50% { transform: rotate(-45deg) scale(1.15); }
? ? ? ? ? ? }
? ? ? ? `;
? ? ? ? document.head.appendChild(style);
? ? </script>
</body>
</html> -
功能亮點
-
五種愛心實現方法：
-
偽元素方法（最常用）
-
Border-radius方法
-
CSS clip-path方法
-
SVG方法
-
文字方法（使用??字符）
-
-
動畫效果：
-
每個愛心都有獨特的脈動動畫
-
平滑的縮放效果模擬心跳
-
不同的動畫速度創造多樣化效果
-
-
愛心生成器：
-
實時調整愛心尺寸（50px-300px）
-
自定義愛心顏色
-
控制動畫速度（慢速/正常/快速）
-
播放/重置功能
-
-
響應式設計：
-
在手機、平板和桌面設備上均完美顯示
-
在小屏幕設備上自動調整布局
-
-
代碼展示：
-
每個方法都附帶源代碼展示
-
語法高亮提高可讀性
-
代碼塊可滾動查看
-
)
