光速穿梭JavaScript特效代码
https://www.bootstrapmb.com/item/15085
创建一个看起来像“光速穿梭”的JavaScript特效通常涉及到HTML、CSS和JavaScript的结合。下面我将提供一个简单的示例，展示如何使用这些技术来创建一个动画效果，模拟光速穿梭的感觉。这个示例将使用CSS的@keyframes动画来创建动态效果，并用JavaScript来控制动画的开始和结束。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>光速穿梭特效</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="light-speed-effect"></div>
<button onclick="toggleEffect()">切换光速穿梭</button>
<script src="script.js"></script>
</body>
</html>body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
overflow: hidden;
}
.light-speed-effect {
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
position: relative;
animation: lightSpeed 2s linear infinite;
opacity: 0;
animation-play-state: paused;
}
@keyframes lightSpeed {
0% {
opacity: 1;
transform: translateX(0) translateY(0);
}
50% {
opacity: 0.5;
transform: translateX(50%) translateY(50%);
}
100% {
opacity: 0;
transform: translateX(100%) translateY(100%);
}
}function toggleEffect() {
var effect = document.querySelector('.light-speed-effect');
if (effect.style.animationPlayState === 'paused' || effect.style.animationPlayState === '') {
effect.style.animationPlayState = 'running';
} else {
effect.style.animationPlayState = 'paused';
}
}说明
- HTML：定义了一个
div元素（.light-speed-effect）和一个按钮，用于切换动画。 - CSS：
.light-speed-effect类定义了一个圆形元素，并使用@keyframes动画来创建“光速穿梭”的效果。初始时，动画是暂停的（animation-play-state: paused;）。 - JavaScript：
toggleEffect函数检查动画的播放状态，并在点击按钮时切换它。
这个示例提供了一个简单的光速穿梭动画效果。你可以根据需要调整动画的属性（如持续时间、延迟、变换等）来创建更复杂的效果。
