在 HTML-Style 中传递随机值

Question

我需要在附加到旋转图形的 HTMl 样式中传递一个随机数。即使我很努力也做不到。以下是我写的代码，但没有效果。

 <script>
    @ViewBag.angle  = ( Math.floor(Math.random()* (5 - 1)+1))+deg;
 </script
 <style>
   keyframes service-level{100%{transform:rotateZ(@ViewBag.angle);}}    
 </style>

如果我将下面的代码与静态值一起使用，它就可以正常工作。请指教

 keyframes service-level{100%{transform:rotateZ(90deg);}}

Answer 1

除非您使用某种模板语言将 @–关键字替换为值，否则浏览器（或 CSS 解析器）不知道如何处理 @ViewBag.angle。

您需要通过 javascript:

注入样式

var style = document.createElement("style");
var angle = (Math.floor(Math.random() * (5 - 1) + 1)) + "deg";
style.type = "text/css";
style.innerHTML = "@keyframes service-level {100% {transform: rotate(" + angle + ");}}";
document.head.appendChild(style);

并使用 CSS 中的动画名称（链接 .css 文件或内联文件，此处无关紧要）：

div {
  animation-name: service-level;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Codepen example here

如果您想要许多随机旋转的元素，transition 会更适合：

[].forEach.call(divs, function(div) {
    var angle = (Math.floor(Math.random() * (5 - 1) + 1)) + "deg";
    div.style.transform = "rotate(" + angle + ")";
});

CSS:

div {
  transform: rotate(0deg);
  transition: all 3s;
}

Codepen example here

在 HTML-Style 中传递随机值

Pass random value in HTML-Style

html

javascript

random

styles