用HTML+CSS+JS 做一个闪动的心
时间: 2023-06-14 14:05:34 浏览: 43
可以用 HTML、CSS 和 JavaScript 来制作一个闪动的心形图案。下面是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>闪动的心</title>
<style>
body {
background-color: black;
}
.heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 90px;
background-color: #ff69b4;
transform-origin: center;
animation: heartbeat 1s ease-in-out infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background-color: #ff69b4;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
解释一下代码:
- HTML 中只有一个 `div` 元素,用来包裹心形图案。
- CSS 中用了伪元素 `:before` 和 `:after` 来实现左右两侧的半圆形,通过旋转和变形来调整角度和形状。
- `transform-origin` 属性用来设置变换的基点,以图案的中心为基点进行动画缩放。
- `animation` 属性用来设置动画效果,指定 `heartbeat` 关键帧动画,并设置持续时间为 1 秒、缓动方式为 `ease-in-out`,并设置无限循环。
这样就可以制作一个闪动的心形图案了,效果如下所示:
![闪动的心形图案](https://i.imgur.com/hKMkCOG.gif)