在 SASS 中创建随机背景颜色答案

【问题标题】：creating a random background color in SASS在 SASS 中创建随机背景颜色
【发布时间】：2020-01-03 16:45:19
【问题描述】：

我试图在 Sass 中有 1-3 种不同颜色的翻转效果。我该怎么做？到目前为止，这是我的代码..

input[type=submit] {
    font-size:1.3em;
    padding:5px;
    font-family:$paragraphFont;
    width:400px;
    border:1px solid #888;
    box-sizing:border-box;
    margin-top:15px;
    cursor:pointer;
    transition:background-color .2s ease-in-out;

    &:hover {
        cursor:pointer;
        background-color:#3cde77;
    }
}

<form>
    <p>Name:</p><input type="text" />
    <p>Email:</p><input type="text" />
    <p>Message:</p><textarea></textarea>
    <input type="submit" value =" Send Message" />
</form>

我想你可以以某种方式使用 random() 函数并将我的颜色分配给一个数字，但我不知道如何。

大家有什么想法吗？

【问题讨论】：

Returning a Random Position and Color With SASS的可能重复
每次悬停时随机颜色会发生变化，还是每次编译时都会发生变化？
如果是在编译期间，那么@DeepakYadav 提到的链接将完美运行。否则你会想要使用 JS。
我有一个网站，我正在使用三种不同的颜色。我希望这些颜色中的每一种都是随机悬停在提交按钮上的背景。在 Deepak 提供的示例中，rgb(random(256)-1, random(256)-1, random(256)-1); 256 代表什么？
背景色：nth(red green blue, random(3));

标签： html sass rollover

【解决方案1】：

你可以做的是SCSS的一个随机函数

 $repeat: 10; // 10 iterations
 input[type=submit]{
 @for $i from 1 through $repeat{
      &:nth-child(#{$i}) {
            background-color: rgb(random(255),random(255),random(255));            
      }
    }
  }

【讨论】：

【解决方案2】：

我能够使用 JS 做到这一点。每次您将鼠标悬停在“发送消息”按钮上时，它都会从 3 种不同的颜色中随机选择。然后它会恢复为初始的灰色。

var send = document.querySelector('.send');

send.addEventListener("mouseover", function() {
  var colors3 = ["red", "green", "blue"];
  var randomColor = colors3[Math.floor(Math.random() * 3)];
  this.style.backgroundColor = randomColor;
});

send.addEventListener("mouseout", function() {
  this.style.backgroundColor = "darkgrey";
});

input[type=submit] {
  font-size: 1.3em;
  padding: 5px;
  font-family: $paragraphFont;
  width: 400px;
  border: 1px solid #888;
  box-sizing: border-box;
  margin-top: 15px;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
  background-color: darkgrey;
}

<form>
  <p>Name:</p><input type="text" />
  <p>Email:</p><input type="text" />
  <p>Message:</p><textarea></textarea>
  <input type="submit" class="send" value=" Send Message" />
</form>

http://codepen.io/anon/pen/ryowjZ

【讨论】：

【解决方案3】：

这不是一个完整的解决方案，我敢肯定它不是一个好的解决方案，但它是一个纯 CSS 解决方案：http://codepen.io/anon/pen/oZJqxR

这个想法是让您的按钮不断循环使用 CSS 关键帧动画的背景颜色，但隐藏在蒙版后面。当您悬停时，会移除遮罩并暂停动画，从而为您提供“冻结”颜色，该颜色会根据鼠标进入按钮时的循环位置来选择。

HTML：

<button><span>Hover me</span></button>

CSS

button {
  padding: 0.5rem 2rem;
  border: 1px solid #CCC;
  font-size: 1.5rem;
  background: pink;
  position: relative;
  -webkit-animation: cycle 1s steps(3) infinite;
  animation: cycle 1s steps(3) infinite;
}
button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #DDD;
}
button span {
  position: relative;
  z-index: 1;
}
button:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
button:hover:after {
  display: none;
}

@keyframes cycle {
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

这目前在 3 种指定颜色之间没有清晰地挑选 - 显示了一些中间颜色。这取决于关键帧动画和按钮上的steps 声明 - 我确信可以完成，但需要微调。

最后一个警告 - 这比使用 javascript 选择颜色更耗费资源 - 如果您在一个页面上同时拥有多个这样的元素，它会变得非常繁重。

【讨论】：