Zufälliger Wert im HTML-Style

Question

Ich muss eine Zufallszahl in einem HTMl Style übergeben, der an eine Figur angehängt ist, die sich dreht. Ich kann das auch nicht, nachdem ich mich angestrengt habe. Das Folgende ist der Code, den ich geschrieben habe, aber keinen Effekt.

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

Wenn ich unten Code mit statischem Wert verwende, funktioniert es gut. Bitte beraten.

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

Answer 1

Es sei denn, Sie einig Template-Sprache verwenden, die keine Ahnung @ -keywords mit Werten, der Browser (oder CSS-Parser) hat ersetzt, was mit @ViewBag.angle zu tun.

Sie müssten den Stil über Javascript injizieren:

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); 

Und verwenden Sie die Animation Namen in CSS (verknüpfte CSS-Datei oder inline, spielt hier keine Rolle):

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

Codepen example here

Wenn Sie haben wollen viele zufällig Elemente gedreht, würde transition eine bessere Passform sein:

[].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