设计思路
-
使用纯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）
-
自定义爱心颜色
-
控制动画速度（慢速/正常/快速）
-
播放/重置功能
-
-
响应式设计：
-
在手机、平板和桌面设备上均完美显示
-
在小屏幕设备上自动调整布局
-
-
代码展示：
-
每个方法都附带源代码展示
-
语法高亮提高可读性
-
代码块可滚动查看
-
