传递HTML风格的随机值

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

，除非您使用的是一些模板语言，该语言替换了 @ - 用值替换为browser（或CSS Parser），否则不知道该如何处理@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示例此处

如果您想拥有许多随机旋转的元素，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示例此处