HTML电脑蹦迪代码,利用js实现html闪烁蹦迪
时间: 2024-01-20 07:04:30 浏览: 45
以下是一个简单的实现 HTML 页面闪烁蹦迪的 JS 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Bounce and Blink</title>
<style>
h1 {
animation: bounce 2s infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<h1 class="blink">Hello, World!</h1>
<script>
setInterval(function() {
document.querySelector('h1').classList.toggle('blink');
}, 1000);
</script>
</body>
</html>
```
这段代码定义了两个 CSS 动画,一个是 `bounce`,用于让元素上下弹跳;另一个是 `blink`,用于让元素闪烁。同时,JS 部分每隔一秒钟切换元素的 `blink` 类,实现闪烁效果。