Question

我一直在做一些搜索，但我还没找到一个有效的解决方案。我还应该通过说明我在CSS方面非常棒的方式来说明这一点。

所以我使用名为Muxy.io的网站来处理我的流的通知。它允许您使用HTML文件和CSS文件自定义通知。

目前它看起来像这样： Notification preview

我想要实现的是随机化通知显示的角度。

这是我当前的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;} 
}

要更改通知的角度，我需要更改＆＃34;旋转（-deg）＆＃34;本部分代码的一部分。而且，根据我的理解，您无法在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

（代表OP发布）。

解决了，感谢帮助人:)。这是添加到脚本部分以获得所需效果的代码行：

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

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

1 个答案: