- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一堆我创建并放置在“ 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/
我让随机数低于之前的随机数。 if Airplane==1: while icounter0: print "You have enoph fuel to get to New
是否可以生成 BigFloat 的随机数?类型均匀分布在区间 [0,1)? 我的意思是,因为 rand(BigFloat)不可用,看来我们必须使用 BigFloat(rand())为了那个结局。然而,
我正在尝试学习 Kotlin,所以我正在学习互联网上的教程,其中讲师编写了一个与他们配合良好的代码,但它给我带来了错误。 这是错误 Error:(26, 17) Kotlin: Cannot crea
是否有任何方法可以模拟 Collections.shuffle 的行为,而不使比较器容易受到排序算法实现的影响,从而保证结果的安全? 我的意思是不违反类似的契约(Contract)等.. 最佳答案 在
我正在创建一个游戏,目前必须处理一些math.random问题。 我的Lua能力不是那么强,你觉得怎么样 您能制定一个使用 math.random 和给定百分比的算法吗? 我的意思是这样的函数: fu
我想以某种方式让按钮在按下按钮时随机改变位置。我有一个想法如何解决这个问题,其中一个我在下面突出显示,但我已经认为这不是我需要的。 import javafx.application.Applicat
对于我的 Java 类(class),我应该制作一个随机猜数字游戏。我一直陷入过去几天创建的循环中。程序的输出总是无限循环,我不明白为什么。非常感谢任何帮助。 /* This program wi
我已经查看了涉及该主题的一些其他问题,但我没有在任何地方看到这个特定问题。我有一个点击 Web 元素的测试。我尝试通过 ID 和 XPath 引用它,并使用 wait.until() 等待它变得可见。
我在具有自定义类的字典和列表中遇到了该异常。示例: List dsa = (List)Session["Display"]; 当我使用 Session 时,转换工作了 10-20 次..然后它开始抛
需要帮助以了解如何执行以下操作: 每隔 2 秒,这两个数字将生成包含从 1 到 3 的整数值的随机数。 按下“匹配”按钮后,如果两个数字相同,则绿色标签上的数字增加 1。 按下“匹配”按钮后,如果两个
void getS(char *fileName){ FILE *src; if((src = fopen(fileName, "r")) == NULL){ prin
如果我有 2 个具有以下字段的 MySQL 数据库... RequestDB: - Username - Category DisplayDB: - Username - Category
我有以下语句 select random() * 999 + 111 from generate_series(1,10) 结果是: 690,046183290426 983,732229881454
我有一个使用 3x4 CSS 网格构建的简单网站。但出于某种原因,当我在 chrome“检查”中检查页面时,有一个奇怪的空白 显然不在我的代码中的标签。 它会导致网站上出现额外的一行,从而导致出现
我有两个动画,一个是“过渡”,它在悬停时缩小图像,另一个是 animation2,其中图像的不透明度以周期性间隔重复变化。 我有 animation2 在图像上进行,当我将鼠标悬停在它上面时,anim
如图所示post在 C++ 中有几种生成随机 float 的方法。但是我不完全理解答案的第三个选项: float r3 = LO + static_cast (rand()) /( static_c
我正在尝试将类添加到具有相同类的三个 div,但我不希望任何被添加的类重复。 我有一个脚本可以将一个类添加到同时显示的 1、2 或 3 个 div。期望的效果是将图像显示为背景图像,并且在我的样式表中
我有一个基本上可以工作的程序,它创建由用户设置的大小的嵌套列表,并根据用户输入重复。 但是,我希望各个集合仅包含唯一值,目前这是我的输出。 > python3 testv.py Size of you
我正在尝试基于 C# 中的种子生成一个数字。唯一的问题是种子太大而不能成为 int32。有什么方法可以像种子一样使用 long 吗? 是的,种子必须很长。 最佳答案 这是我移植的 Java.Util.
我写这个函数是为了得到一个介于 0 .. 1 之间的伪随机 float : float randomFloat() { float r = (float)rand()/(float)RAN
我是一名优秀的程序员,十分优秀!