写一个跳动的爱心的网页
时间: 2024-05-07 13:20:56 浏览: 7
好的,这是一个使用HTML、CSS和JavaScript创建跳动的爱心的示例代码:
HTML代码:
```
<div class="heart-container">
<div class="heart"></div>
</div>
```
CSS代码:
```
.heart-container {
position: relative;
width: 100px;
height: 100px;
}
.heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: red;
border-radius: 25px 25px 0 0;
box-shadow: 0 -25px 0 red;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: red;
border-radius: 25px 25px 0 0;
}
.heart:before {
width: 50px;
height: 50px;
top: -25px;
}
.heart:after {
width: 50px;
height: 50px;
top: 0;
}
```
JavaScript代码:
```
const heart = document.querySelector(".heart");
function bounce() {
heart.classList.add("bounce");
setTimeout(() => {
heart.classList.remove("bounce");
}, 1000);
}
setInterval(bounce, 2000);
```
这段代码会在页面中显示一个红色的爱心,每两秒会有一次跳动的动画。
注意:这段代码需要在浏览器中运行,可以使用HTML文件直接打开,也可以使用本地服务器来运行。