将JavaScript变量传递给外部CSS文件

Question

我已经做了一些搜索，但我还没有找到一个有效的解决方案。我还应该说，在CSS方面，我是个菜鸟。

因此，我使用一个名为Muxy.io的站点来处理我的流的通知。它允许您使用HTML文件和CSS文件自定义通知。

目前看起来是这样的：通知预览

我想要完成的是随机化通知出现的角度。

下面是我当前的HTML代码：

<div id="notificationHolder">
  <div id="followNotification">
    <div id="line">
      <span id="name">{name}</span>
      <span id="tagline">Has Just Followed!</span>
    </div>
  </div>

  <div class="tts" style="display: none;">
    {tts_user_message}
  </div>
  <script>
    $( document ).ready(function() {
        var audio = [ArrayOfSoundURLs];
        var rand = Math.floor(Math.random() * audio.length);
        audio[rand].play();
    });
  </script>
</div>

下面是我当前的CSS代码(我没有写这个)：

#line {
  background: rgba(37, 48, 74, .8)
}
#name {
  color: rgb(255, 179, 61)
}
#tagline {
  color: rgb(240, 242, 245)
}


html, body {
  margin: 0;
  padding: 0;
  font-family: 'Forced Square', sans-serif;
  font-style: italic;
}  

#notificationHolder {
  position: relative;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  top: 0;
  left: 0;
}

#line {
  width: 0;
  height: 0;
  position: absolute;
  top: 400px;
  left: 50%;
  margin-left: 0;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  opacity: 0;
  -webkit-animation: lineIn 0.2s .6s forwards, 
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
          animation: lineIn 0.2s .6s forwards, 
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards; 
}

@-webkit-keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@-webkit-keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@-webkit-keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}

@keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}


#name {
  text-align: center;
  font-size: 120px;
  width: 2200px;
  display: block;
  line-height: 120px;
  text-indent: -3000px;
  position: absolute;
  top: 30px;
  white-space: nowrap;
  opacity: 0;
  -webkit-animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
          animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;} 
}

@keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;} 
}

@-webkit-keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;} 
  100% {text-indent: 3000px;} 
}

@keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;} 
  100% {text-indent: 3000px;} 
}

#tagline {
  text-align: center;
  font-size: 50px;
  width: 2200px;
  display: block;
  line-height: 50px;
  text-indent: 3000px;
  position: absolute;
  bottom: 30px;
  white-space: nowrap;
  opacity: 0;
  -webkit-animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
          animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;} 
  100% {text-indent: 20px;opacity: 1;} 
}

@keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;} 
  100% {text-indent: 20px;opacity: 1;} 
}

@-webkit-keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;} 
  100% {text-indent: -3000px;} 
}

@keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;} 
  100% {text-indent: -3000px;} 
}

要更改通知的角度，我需要更改这部分代码的“旋转(-deg)”部分。而且，据我所知，您不能在CSS中生成随机数，我需要在HTML文件中这样做，并将它传递给CSS文件。

#line {
      width: 0;
      height: 0;
      position: absolute;
      top: 400px;
      left: 50%;
      margin-left: 0;
      -webkit-transform: rotate(-5deg);
              transform: rotate(-5deg);
      opacity: 0;
      -webkit-animation: lineIn 0.2s .6s forwards, 
                 lineGrow 0.4s 1s forwards,
                 linehide 0.5s 6.7s forwards;
              animation: lineIn 0.2s .6s forwards, 
                 lineGrow 0.4s 1s forwards,
                 linehide 0.5s 6.7s forwards; 
    }

因此，我的问题是，我如何才能做到这一点，同时坚持在Muxy.io网站的限制？

如果这太具体了，我很抱歉(我认为最好给你所需的所有信息)。通常情况下，我会尽我所能自己解决这些问题，但我遇到了一些困难。我很感谢你能在这件事上发光。

Answer 1

(代表“任择议定书”张贴)。

解决了，谢谢大家的帮助:)下面是添加到脚本部分的代码行，以获得所需的效果：

var rand_angle = 5 - Math.floor(Math.random() * 10);
document.getElementById("line").style.transform = "rotate(" + rand_angle + "deg)";