css + js 绘制爱心
时间: 2023-12-11 19:04:36 浏览: 39
可以通过以下 CSS 和 JavaScript 代码实现绘制爱心:
CSS 代码:
```css
.heart {
width: 20px;
height: 20px;
position: relative;
transform: rotate(45deg);
background: red;
}
.heart::before,
.heart::after {
content: "";
width: inherit;
height: inherit;
background: inherit;
position: absolute;
}
.heart::before {
top: -10px;
}
.heart::after {
left: -10px;
}
```
JavaScript 代码:
```javascript
const heart = document.createElement("div");
heart.classList.add("heart");
document.body.appendChild(heart);
let animationFrameId = null;
let position = 0;
let direction = 1;
function animateHeart() {
position += direction;
heart.style.top = position + "px";
heart.style.left = position + "px";
if (position > window.innerHeight) {
direction = -1;
} else if (position < 0) {
direction = 1;
}
animationFrameId = requestAnimationFrame(animateHeart);
}
animateHeart();
```
在 CSS 中,通过伪元素 ::before 和 ::after 绘制出两个半圆形组成爱心的形状。在 JavaScript 中,创建一个 div 元素,并添加类名为 heart,将其添加到 body 元素中。使用 requestAnimationFrame 方法循环调用 animateHeart 函数,这个函数会不断地改变爱心的位置,当位置超出窗口范围时,改变方向。最终实现了一个可爱的爱心动画效果。