用html生成一个动态爱心
时间: 2024-05-03 09:19:00 浏览: 14
可以使用CSS3动画和伪元素来实现一个动态爱心。以下是代码示例:
```html
<div class="heart"></div>
```
```css
.heart {
width: 30px;
height: 30px;
position: relative;
margin: 0 auto;
transform: translateZ(0);
}
.heart:before,
.heart:after {
content: "";
position: absolute;
top: 0;
left: 15px;
width: 15px;
height: 26px;
background: #fc2e52;
border-radius: 15px 15px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.heart:hover:before,
.heart:hover:after {
background: #ff8b9e;
animation: heartbeat 1s ease-in-out infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(0.75);
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.75);
}
100% {
transform: scale(1);
}
}
```
这段代码将生成一个初始状态为红色的爱心,当鼠标悬停在上面时,将变成粉色并产生一个心跳效果。你可以将其复制到你的HTML文件中并进行修改。