代码实现爱心动画
时间: 2023-07-23 12:16:41 浏览: 113
HTML动态爱心特效代码
5星 · 资源好评率100%
好的,以下是一个简单的爱心动画的实现代码,使用了 HTML、CSS 和 JavaScript:
HTML 代码:
```html
<div class="heart"></div>
```
CSS 代码:
```css
.heart {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
background-color: #ff4d4d;
animation: heartbeat 1s ease-in-out infinite;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
top: 0;
width: 50px;
height: 80px;
background-color: #ff4d4d;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
}
.heart::after {
left: 50px;
transform: rotate(45deg);
}
```
JavaScript 代码:
```javascript
const heart = document.querySelector(".heart");
const body = document.querySelector("body");
let heartSize = 100;
let heartOpacity = 1;
function animateHeart() {
if (heartSize >= 200) {
heartSize = 100;
heartOpacity = 1;
} else {
heartSize += 2;
heartOpacity -= 0.01;
}
heart.style.width = heartSize + "px";
heart.style.height = heartSize + "px";
heart.style.opacity = heartOpacity;
requestAnimationFrame(animateHeart);
}
animateHeart();
```
这段代码创建了一个红色的爱心形状,并在其上应用了一个名为“heartbeat”的动画,使其看起来像是在跳动。JavaScript 代码则用 requestAnimationFrame() 方法实现了一个简单的动画,让爱心在不断变大和透明度降低的过程中重复播放。
阅读全文