javascript爱心代码动态
时间: 2023-10-06 11:04:50 浏览: 130
HTML动态爱心特效代码
5星 · 资源好评率100%
以下是一个使用 JavaScript 实现动态爱心代码的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #f5f5f5;
}
#heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
color: red;
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="heart">❤</div>
<script>
// 使用 JavaScript 动态创建爱心元素
function createHeart() {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerHTML = '❤';
// 设置随机位置
const x = Math.floor(Math.random() * window.innerWidth);
const y = Math.floor(Math.random() * window.innerHeight);
heart.style.left = x + 'px';
heart.style.top = y + 'px';
// 设置随机大小
const size = Math.floor(Math.random() * 100) + 50;
heart.style.fontSize = size + 'px';
// 设置随机动画延迟和持续时间
const delay = Math.random() * 2;
const duration = Math.random() * 2 + 2;
heart.style.animationDelay = delay + 's';
heart.style.animationDuration = duration + 's';
// 添加到页面中
document.body.appendChild(heart);
// 动画结束后移除爱心元素
setTimeout(() => {
heart.remove();
}, duration * 1000);
}
// 每隔一段时间创建新的爱心
setInterval(createHeart, 500);
</script>
</body>
</html>
```
这段代码将在页面上创建动态的爱心效果。爱心会按照随机位置、大小、动画延迟和持续时间进行动态生成和移除。每隔500毫秒会创建一个新的爱心元素。你可以将上述代码复制到一个 HTML 文件中,并在浏览器中打开该文件以查看效果。
阅读全文