javascript - 为类的每个元素分配随机动画延迟-6ren

javascript - 为类的每个元素分配随机动画延迟

转载作者：太空宇宙更新时间：2023-11-04 07:24:01

我有一堆我创建并放置在“ map ”上的雷达信号。此刻他们都同时出现。我想知道是否有办法为它们提供所有单独的 animation-delay，同时仍然保留 .delayedBlip 上的 1.6 秒动画延迟。

为了详细说明，我希望每个具有类名 .blip 的元素都分配有一个随机持续时间为 1-2 秒的 animation-delay。在此之后，我需要它的兄弟 .delayedBlip 在 blip 动画之后延迟 1.6 秒。

相关代码如下:

.table {
  width: 600px;
  height: 450px;
  background: url('https://i.imgur.com/6QPG66E.jpg');
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #133342;
  border: solid 3px rgba(127, 222, 254, 0.2);
  border-radius: 15px;
  transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
  margin-top: 200px;
  opacity: 0.8;
  margin-left: 15%;
  overflow: hidden;
}

#radarline {
  background: -webkit-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
  background: -o-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
  background: linear-gradient(to right, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001db9e0', endColorstr='#001db9e0', GradientType=1);
  /* IE6-9 */
  width: 30px;
  height: 1400px;
  transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
  margin-top: -475px;
  margin-left: 0;
  animation-name: radarline;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes radarline {
  from {
    margin-left: -30px;
  }
  to {
    margin-left: 630px;
  }
}

.blip {
  margin: 0 0;
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 211, 255, 1.00);
  opacity: 1;
  width: 25px;
  height: 25px;
}

.blipping {
  border-radius: 50%;
  -webkit-animation: scaleUp 2.3s infinite linear;
  animation: scaleUp 2.3s infinite linear;
}

.delayedBlip {
  -webkit-animation-delay: -1.6s;
  animation-delay: -1.6s;
}

@keyframes scaleUp {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  40% {
    opacity: 0.5;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}

@-moz-keyframes scaleUp {
  0% {
    opacity: 1;
    -moz-transform: scale(0);
  }
  40% {
    opacity: 0.5;
    -moz-transform: scale(0.5);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(1.0);
  }
}

@-webkit-keyframes scaleUp {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
  }
  40% {
    opacity: 0.5;
    -webkit-transform: scale(0.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.0);
  }
}

<div class="table">
  <div id="radarline"></div>
  <div class="blips">
    <div class="blipping blip" style="margin-left: 300px; top: 300px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 300px; top: 300px;"></div>
    <div class="blipping blip" style="margin-left: 200px; top: 100px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 200px; top: 100px;"></div>
    <div class="blipping blip" style="margin-left: 100px; top: 30px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 100px; top: 30px;"></div>
    <div class="blipping blip" style="margin-left: 400px; top: 250px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 400px; top: 250px;"></div>
    <div class="blipping blip" style="margin-left: 120px; top: 280px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 120px; top: 280px;"></div>
    <div class="blipping blip" style="margin-left: 260px; top: 320px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 260px; top: 320px;"></div>
    <div class="blipping blip" style="margin-left: 280px; top: 400px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 400px;"></div>
    <div class="blipping blip" style="margin-left: 400px; top: 350px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 400px; top: 350px;"></div>
    <div class="blipping blip" style="margin-left: 380px; top: 30px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 380px; top: 30px;"></div>
    <div class="blipping blip" style="margin-left: 170px; top: 200px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 170px; top: 200px;"></div>
    <div class="blipping blip" style="margin-left: 420px; top: 120px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 420px; top: 120px;"></div>
    <div class="blipping blip" style="margin-left: 280px; top: 170px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 170px;"></div>
    <div class="blipping blip" style="margin-left: 350px; top: 210px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 350px; top: 210px;"></div>
    <div class="blipping blip" style="margin-left: 220px; top: 240px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 220px; top: 240px;"></div>
    <div class="blipping blip" style="margin-left: 280px; top: 40px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 40px;"></div>
  </div>
</div>

最佳答案

我们可以通过定位所有具有该类的元素来实现这一点。

您遍历它们并使用 next 函数获取 1 到 2 之间的随机数；

Math.random() * (2 - 1) + 1

JS函数:

let blips = document.getElementsByClassName('blip');
for(let i =0; i<blips.length; i++){
  blips[i].style.animationDelay = (Math.random() * (2 - 1) + 1)+"s";
}

希望对您有所帮助:>

let blips = document.getElementsByClassName('blip');
for(let i =0; i<blips.length; i=i+2){
  let delay =  (Math.random() * (2 - 1) + 1);
  blips[i].style.animationDelay =delay+"s";
  blips[i+1].style.animationDelay =(delay+1.6)+"s";

}

.table {
  width: 600px;
  height: 450px;
  background: url('https://i.imgur.com/6QPG66E.jpg');
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #133342;
  border: solid 3px rgba(127, 222, 254, 0.2);
  border-radius: 15px;
  transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
  margin-top: 200px;
  opacity: 0.8;
  margin-left: 15%;
  overflow: hidden;
}

#radarline {
  background: -webkit-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
  background: -o-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
  background: linear-gradient(to right, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001db9e0', endColorstr='#001db9e0', GradientType=1);
  /* IE6-9 */
  width: 30px;
  height: 1400px;
  transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
  margin-top: -475px;
  margin-left: 0;
  animation-name: radarline;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes radarline {
  from {
    margin-left: -30px;
  }
  to {
    margin-left: 630px;
  }
}

.blip {
  margin: 0 0;
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 211, 255, 1.00);
  opacity: 1;
  width: 25px;
  height: 25px;
}

.blipping {
  border-radius: 50%;
  -webkit-animation: scaleUp 2.3s infinite linear;
  animation: scaleUp 2.3s infinite linear;
}

.delayedBlip {
  -webkit-animation-delay: -1.6s;
  animation-delay: -1.6s;
}

@keyframes scaleUp {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  40% {
    opacity: 0.5;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}

@-moz-keyframes scaleUp {
  0% {
    opacity: 1;
    -moz-transform: scale(0);
  }
  40% {
    opacity: 0.5;
    -moz-transform: scale(0.5);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(1.0);
  }
}

@-webkit-keyframes scaleUp {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
  }
  40% {
    opacity: 0.5;
    -webkit-transform: scale(0.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.0);
  }
}

<div class="table">
  <div id="radarline"></div>
  <div class="blips">
    <div class="blipping blip" style="margin-left: 300px; top: 300px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 300px; top: 300px;"></div>
    <div class="blipping blip" style="margin-left: 200px; top: 100px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 200px; top: 100px;"></div>
    <div class="blipping blip" style="margin-left: 100px; top: 30px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 100px; top: 30px;"></div>
    <div class="blipping blip" style="margin-left: 400px; top: 250px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 400px; top: 250px;"></div>
    <div class="blipping blip" style="margin-left: 120px; top: 280px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 120px; top: 280px;"></div>
    <div class="blipping blip" style="margin-left: 260px; top: 320px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 260px; top: 320px;"></div>
    <div class="blipping blip" style="margin-left: 280px; top: 400px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 400px;"></div>
    <div class="blipping blip" style="margin-left: 400px; top: 350px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 400px; top: 350px;"></div>
    <div class="blipping blip" style="margin-left: 380px; top: 30px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 380px; top: 30px;"></div>
    <div class="blipping blip" style="margin-left: 170px; top: 200px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 170px; top: 200px;"></div>
    <div class="blipping blip" style="margin-left: 420px; top: 120px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 420px; top: 120px;"></div>
    <div class="blipping blip" style="margin-left: 280px; top: 170px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 170px;"></div>
    <div class="blipping blip" style="margin-left: 350px; top: 210px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 350px; top: 210px;"></div>
    <div class="blipping blip" style="margin-left: 220px; top: 240px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 220px; top: 240px;"></div>
    <div class="blipping blip" style="margin-left: 280px; top: 40px;"></div>
    <div class="blipping blip delayedBlip" style="margin-left: 280px; top: 40px;"></div>
  </div>
</div>

关于javascript - 为类的每个元素分配随机动画延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50049812/

文章推荐： c - C 中 shell 命令的历史命令。从哪里开始

文章推荐： java - jboss 7.1项目部署类未找到

文章推荐：符合 C 标准的结构对齐方式

iphone - GKSession 分配/释放/分配 = 泄漏和崩溃
我有一个应用程序，它会抛出 GKSession 并在各种条件下(连接超时、 session 失败等)创建一个新的 GKSession。不过，我遇到了内存泄漏问题，并且有时会在重新连接几次循环后崩溃。
c - 是否可以说哪个指针由 cudaMalloc 分配，哪个由 malloc 分配？
比如我在宿主代码中有一个浮点指针 float *p 是否可以确定他指向的内存类型(设备/主机)？最佳答案在 UVA system 中, 运行时 API 函数 cudaPointerGetAttri
.net - 运行时类型句柄.分配
我已将项目转换为 .Net 4.0 并且以下代码不起作用: typeof(RuntimeTypeHandle).GetMethod("Allocate", BindingFlags.Instance
分配 `ab` 时包含单个字符的字符
当我声明 char ch = 'ab' 时，ch 只包含 'b'，为什么它不存储 'a'？ #include int main() { char ch = 'ab'; printf("%c"
文件的磁盘扇区和 block 分配
我对 Disk Sector 和 Block 有疑问。扇区是一个单位，通常为 512 字节或 1k、2k、4k 等取决于硬件。文件系统 block 大小是一组扇区大小。假设我正在存储一个 5KB 的
javascript - 分配/分发随机数量
假设我有 8 个人和5000 个苹果。我想将所有苹果分发给所有 8 个人，这样我就没有苹果了。但每个人都应该得到不同数量将它们全部分发出去的最佳方式是什么？我是这样开始的: let peopl
javascript - 分配 "/"热键以在搜索框上创建焦点用户
我正在构建的网站顶部有一个搜索栏。与 Trello 或 Gmail 类似，我希望当用户按下“/”键时，他们的焦点就会转到该搜索框。我的 JavaScript 看起来像这样: document.onk
javascript - 事件处理程序之间的一个 $this 分配
我有一小段代码: if (PZ_APP.dom.isAnyDomElement($textInputs)){ $textInputs.on("focus", function(){
iphone - iOS保留，分配
我观察到以下行为。接受了两个属性变量。 @property (nonatomic, retain) NSString *stringOne; @property (nonatomic, assign
java - BODMAS 分配
我正在解决这样的问题 - 实现一个计算由以下内容组成的表达式的函数以下操作数:“(”、“)”、“+”、“-”、“*”、“/”。中的每个数字表达式可能很大(与由字符串表示的一样大)1000 位)。 “/
python - 主机中任务的指派/分配
我有一组主机和一组任务。每个主机都有 cpu、mem 和任务容量，每个任务都有 cpu、mem 要求。每个主机都属于一个延迟类别，并且可以与具有特定延迟值的其他主机通信。每个任务可能需要以等于或
c - c中内存的重新分配/分配
该程序的作用:从文件中读取一个包含 nrRows 行和 nrColomns 列的矩阵(二维数组)。矩阵的所有元素都是 [0,100) 之间的整数。程序必须重新排列矩阵内的所有元素，使每个元素等于其所在
c++ - 长号。分配
世界!我有个问题。今天我尝试创建一个代码，它可以找到加泰罗尼亚语号码。但是在我的程序中可以是长数字。我找到了分子和分母。但我不能分割长数字!此外，只有标准库必须在此程序中使用。请帮帮我。这是我的代码
ios - 分配 NSInteger*
我确定我遗漏了一些明显的东西，但我想在 Objective C 中创建一个 NSInteger 指针的实例。 -(NSInteger*) getIntegerPointer{ NSInteger
ios - 分配/初始化只读属性
这个问题在这里已经有了答案: Difference between self.ivar and ivar? (4 个答案) 关闭 9 年前。
c++ - 分配 vector
我如何将 v[i] 分配给一系列整数(v 的类型是 vector )而无需最初填充最佳答案你的意思是将 std::vector 初始化为一系列整数？ int i[] = {1, 2, 3, 4,
c - 分配 - 指针到指针
我想寻求分配方面的帮助....我把这个作业带到了学校......我必须编写程序来加载一个 G 矩阵和第二个 G 矩阵，并搜索第二个 G 矩阵以获取存在数第一个 G 矩阵的......但是，当我尝试运行
c - 分配/取消分配资源
我必须管理资源。它基本上是一个唯一的编号，用于标识交换机中的第 2 层连接。可以有 16k 个这样的连接，因此每次用户希望配置连接时，他/她都需要分配一个唯一索引。同样，当用户希望删除连接时，资源(号
c - 分配/未分配字符串的命名约定
是否有任何通用的命名约定来区分已分配和未分配的字符串？我正在寻找的是希望类似于 us/s 来自 Making Wrong Code Look Wrong ，但我宁愿使用常见的东西也不愿自己动手。最佳
c - 如何解决以下函数中的内存分配问题？ (分配)
我需要读取一个 .txt 文件并将文件中的每个单词分配到一个结构中，该结构从结构 vector 指向。我将在下面更好地解释。感谢您的帮助。我的程序只分配文件的第一个字... 我知道问题出在函数 i

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为类的每个元素分配随机动画延迟