javascript - CSS 或 JS 中的随机-6ren

javascript - CSS 或 JS 中的随机

转载作者：行者123 更新时间：2023-12-01 15:14:33

25

4

需要帮助，想要旋转图像，3 秒后它必须以随机度数停止(从 360 到 10800)。当我从最后一个位置单击它时，它开始旋转。

当图像停止时，它会出现一个带有我大量随机引用的区域。它必须是“旋转瓶子”之类的东西

请帮忙，我有一些代码，但不知道如何完成它。

.wheel {
  animation: wheel 3s .5s;
  animation-fill-mode: both;
}

@keyframes wheel {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(10800deg);
  }
}

<head>
  <link rel="stylesheet" href="bottle.css">
  <script src="bottle.js"></script>
</head>
<img id="wheel" class="wheel" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">

最佳答案

您可以使用 css 自定义属性来执行此操作。首先要做的是为您的转换创建一个属性:

:root{
  --rot: rotate(108000deg);
}

然后用它代替你的硬编码值

@keyframes wheel {
  from { transform: rotate(0);}             
  to { transform: var(--rot); }
}

在这个阶段，一切都应该像以前一样继续工作。

现在您可以使用 javascipt 操作该属性:

var min = 360;
var max = 108000;
var rnd = Math.random()* (max - min) + min;
console.log(rnd);

var wheel = document.querySelector(".wheel");
wheel.style.setProperty("--rot","rotate(" + rnd + "deg)");

:root{
  --rot: rotate(108000deg);
}

.wheel {				
  animation: wheel 3s .5s;	
  animation-fill-mode: both;	
}

@keyframes wheel {
  from { transform: rotate(0);}				
  to { transform: var(--rot); }
}

<head>
<link rel="stylesheet" href="bottle.css">
<script src="bottle.js"></script>
</head>
<img id="wheel" class="wheel" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">

如果你想在点击之类的东西上重复动画，你需要做一些解决方法

var min = 360;
var max = 108000;

var wheel = document.querySelector("#wheel");
wheel.addEventListener("click", function(e) {
  e.preventDefault;
  
  // -> removing the class
  wheel.classList.remove("wheel");
  
  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  // Oops! This won't work in strict mode. Thanks Felis Phasma!
  // element.offsetWidth = element.offsetWidth;
  // Do this instead:
  void wheel.offsetWidth;
  
  var rnd = Math.random()* (max - min) + min;
  console.log(rnd);
  wheel.style.setProperty("--rot","rotate(" + rnd + "deg)");
  // -> and re-adding the class
  wheel.classList.add("wheel");
}, false);

:root{
  --rot: rotate(108000deg);
}

.wheel {				
  animation: wheel 3s .5s;	
  animation-fill-mode: both;	
}

@keyframes wheel {			
  to { transform: var(--rot); }
}

<head>
<link rel="stylesheet" href="bottle.css">
<script src="bottle.js"></script>
</head>
<img id="wheel" src="https://cdn.iconscout.com/icon/free/png-256/grinning-face-smile-emoji-happy-37705.png">

关于javascript - CSS 或 JS 中的随机，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61815343/

25

4

0

文章推荐： java - 如何从 json google place api 检索 "locality"

文章推荐： java - Eclipse 警告 : fmt:formatDate and html:hidden must be empty

文章推荐： javascript - 如何在 Deno 中写入文件？

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

首页

博学

6Ren·AI

商城

javascript - CSS 或 JS 中的随机