Question

我试图让翻转效果在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（）函数并将我的颜色分配给一个数字，但我不知道如何。

有什么想法吗？

Answer 1

我能够使用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

Answer 2

这不是一个完整的解决方案，我确定它不是一个好的解决方案，但是纯CSS解决方案：{ {3}}

这个想法是你的按钮不断循环使用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选择颜色更加耗费资源 - 如果你一次在页面上有多个这样的元素，它会变得非常繁重。

Answer 3

您可以做的是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));            
      }
    }
  }

在SASS中创建随机背景颜色

3 个答案: