用html画一颗跳动的爱心
时间: 2023-03-04 13:04:50 浏览: 70
以下是使用HTML和CSS绘制跳动的爱心的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>跳动的爱心</title>
<style>
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.animate {
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="heart animate"></div>
</body>
</html>
```
在上面的示例中,我们使用CSS的伪元素`:before`和`:after`来创建爱心的两个部分。然后,我们使用`transform`属性来旋转它们并使它们成为一个完整的爱心。
我们还使用`animation`属性来创建一个名为`heartbeat`的动画,以使爱心跳动。在这个动画中,我们使用`transform`属性来缩放爱心的大小,使其看起来像在跳动。
最后,我们将`animate`类应用于`heart`元素,以便将动画应用于爱心。