html跳动爱心特效代码
时间: 2024-09-30 19:16:06 浏览: 47
HTML本身并不直接支持动画效果,但你可以通过JavaScript配合CSS实现一个简单的跳动爱心特效。下面是一个基本的例子,使用了JavaScript的setInterval函数和CSS的transform属性来创建动态效果:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.heart {
width: 50px;
height: 50px;
position: relative;
background-color: red;
animation: bounce 2s infinite alternate;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
</style>
</head>
<body>
<div class="heart heart-bounce"></div>
<script>
window.onload = function() {
const hearts = document.querySelectorAll('.heart-bounce');
hearts.forEach(function(heart) {
heart.classList.add('bounce');
});
};
</script>
</body>
</html>
```
在这个示例中,`.heart` 容器有一个名为 `bounce` 的CSS动画,使得爱心元素上下跳跃。JavaScript会在页面加载完成后为所有 `.heart-bounce` 类的元素添加 `bounce` 类,激活动画。
阅读全文