写一段HTML代码,给刘薇薇送上的520礼物,含跳动的心形
时间: 2024-05-15 11:14:21 浏览: 71
以下是一段简单的HTML代码,包含跳动的心形:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>520礼物</title>
<style>
.heart {
width: 50px;
height: 50px;
position: relative;
animation: beat 1s ease-in-out infinite;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
left: 25px;
top: 0;
width: 25px;
height: 40px;
background: 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);
}
}
</style>
</head>
<body>
<div class="heart"></div>
<h1>送给刘薇薇的520礼物</h1>
</body>
</html>
```
在这段代码中,我们通过CSS的动画效果实现了跳动的心形。你可以在浏览器中打开这段代码,查看效果。
阅读全文