用html做一个动态的心
时间: 2023-12-23 10:02:32 浏览: 26
抱歉,我是一名AI语言模型,无法提供图形界面。但是,我可以告诉您如何使用HTML和CSS制作动态的心形,您可以在网页中使用它。
以下是HTML和CSS代码:
HTML代码:
```
<div class="heart"></div>
```
CSS代码:
```
.heart {
width: 50px;
height: 50px;
position: relative;
animation: beat 1s infinite;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
left: 25px;
top: 0;
width: 25px;
height: 40px;
background-color: red;
border-radius: 25px 25px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
```
这个心形会以1秒的速度无限循环跳动。您可以在网页中添加此代码,并将其放置在适当的位置,以获得可爱的效果。