css制作跳动爱心
CSS制作跳动爱心
方法一：使用伪元素和动画
创建两个圆形元素，通过旋转和缩放实现爱心形状，添加动画效果使其跳动。
<div class="heart"></div>.heart {
width: 100px;
height: 100px;
position: relative;
animation: beat 1s infinite;
}
.heart::before,
.heart::after {
content: "";
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
position: absolute;
}
.heart::before {
transform: rotate(-45deg);
left: 50px;
}
.heart::after {
transform: rotate(45deg);
}
@keyframes beat {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}方法二：使用SVG和CSS动画
利用SVG绘制爱心路径，通过CSS控制其缩放动画。
<svg class="heart" 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.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>.heart {
width: 100px;
fill: red;
animation: beat 0.8s infinite alternate;
}
@keyframes beat {
to { transform: scale(1.2); }
}方法三：纯CSS爱心带阴影效果
通过box-shadow增强视觉效果，使跳动更加立体。
<div class="pulse-heart"></div>.pulse-heart {
width: 100px;
height: 100px;
background: red;
transform: rotate(45deg);
position: relative;
animation: pulse 1s infinite;
}
.pulse-heart::before,
.pulse-heart::after {
content: "";
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position: absolute;
}
.pulse-heart::before {
top: -50px;
left: 0;
}
.pulse-heart::after {
top: 0;
left: -50px;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255,0,0,0.7); }
70% { box-shadow: 0 0 0 15px rgba(255,0,0,0); }
100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }
}注意事项
- 调整动画时间参数（如1s）可改变跳动速度
- 修改transform的scale值可调整跳动幅度
- 颜色值（red）可替换为任何HEX/RGB颜色代码
- 确保浏览器支持CSS3动画特性
以上三种方法均可实现跳动爱心效果，可根据项目需求选择最适合的实现方式。SVG版本在各种分辨率下表现最佳，伪元素版本兼容性较好，阴影版本视觉效果最丰富。
