html编写一个心形闪动的文档
时间: 2023-07-31 21:04:37 浏览: 46
可以使用 CSS3 的动画效果来实现一个心形闪动的效果。下面是一个示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>心形闪动</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.heart {
width: 50px;
height: 50px;
position: relative;
animation: beat 1s ease-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%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
在上面的代码中,我们创建了一个名为 `heart` 的 CSS 类,它代表一个红色的心形。我们使用 `:before` 和 `:after` 伪元素来创建这个心形,然后使用 `transform` 属性来旋转和缩放它们。最后,我们为 `heart` 类添加一个名为 `beat` 的关键帧动画,使心形可以闪动起来。
您可以将上面的代码保存成一个 HTML 文件,然后通过浏览器打开,即可看到一个心形闪动的效果。