光速穿梭JavaScript特效代码_冲击光束网页代码-CSDN博客

本文链接：https://blog.csdn.net/u011626414/article/details/141193485

光速穿梭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函数检查动画的播放状态，并在点击按钮时切换它。

这个示例提供了一个简单的光速穿梭动画效果。你可以根据需要调整动画的属性（如持续时间、延迟、变换等）来创建更复杂的效果。