html 带动画的爱心
时间: 2023-10-11 22:09:52 浏览: 31
抱歉,我是一名语言模型,无法呈现动画效果。但是,我可以提供一些 HTML 代码,可以帮助您创建一个带有动画的爱心:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.heart {
position: relative;
width: 50px;
height: 50px;
transform: rotate(45deg);
margin: 20px;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: red;
border-radius: 25px 25px 0 0;
}
.heart:before {
top: -25px;
left: 0;
width: 25px;
height: 25px;
}
.heart:after {
top: 0;
left: 25px;
width: 25px;
height: 25px;
}
.heart:hover:before,
.heart:hover:after {
animation: beat 0.5s ease-in-out infinite alternate;
}
@keyframes beat {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
这段代码会创建一个红色的爱心,当鼠标悬停在上面时,爱心会以一定的速度跳动。您可以将代码复制到 HTML 文件中并在浏览器中打开,以查看效果。