Question

我在几个Wordpress主题中看到过这个功能，例如页脚的背景会慢慢改变颜色，我总是想知道是否有一个简单的技巧可以做到这一点。（这可能是用jquery完成的？还是可以用纯css完成？）

基本上，背景颜色逐渐从一种颜色过渡到另一种颜色（例如粉红色到蓝色，蓝色到红色，红色到粉红色）并保持无限循环。它不需要任何动作，如悬停或点击，它只是做它的事情。：）

有一种简单的方法吗？如果是这样，我希望通过示例代码看到最好的方法。

提前非常感谢你。

Answer 1

你不需要在jQuery中制作这个技巧。您可以使用简单的css动画，它将更具有执行力和简单性。

这是我的例子

我们的布局

<div class="block"></div>

Css风格

 html, body {
     width: 100%;
     height: 100%;
  } 

 @keyframes color-animation {
    0% {
       background: #ad1457;
    }
    50% {
       background: #6a1b9a;
    } 
    100% {
       background: #bbdefb
    } 
 }

.block {
   width: 100%;
   height: 100%;
   animation: color-animation 3s infinite linear alternate;
}

在此代码中，我们创建了简单的css animation，它可以更改块的颜色。

欢迎你:)如果你愿意，可以问我一些事情。

Answer 2

这样的东西？

<!DOCTYPE html>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<div style="height:150px">
    <div>
        <h1 id="heading"><center>That's how i change color!!</center></h1>
    </div>
    <br><br>
    <div  class="bordered" id="fancy">
        <center>I behave like a chameleon!!</center>
    </div>
    <div style="margin-top:10%; font-size:1em; font-weight:bold;">CSS + JS = AWESOME!!<br><br>Code By Punit gajjar</div>
</div>
<script>
    var myArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
setInterval(function () {
    var rand = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand1 = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand2 = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand3 = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand4 = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand5 = myArray[Math.round(Math.random() * (myArray.length - 1))];  
    document.getElementById("fancy").style.background= '#'+rand+rand2+rand3+rand1+rand5+rand4;
  document.body.style.background= '#'+rand+rand1+rand2+rand3+rand4+rand5;
    setTimeout(function () {
        var rand = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand1 = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand2 = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand3 = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand4 = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand5 = myArray[Math.round(Math.random() * (myArray.length - 1))];  
      document.getElementById("fancy").style.background= '#'+rand+rand2+rand1+rand3+rand5+rand4;
      document.body.style.background= '#'+rand+rand1+rand3+rand2+rand4+rand5;
    }, 1000);   
}, 1000);
</script>

Answer 3

$("body").css("transition","all 3s");
var arr = ["#f00","#0f0","#00f"];
function changeColor(){
   $("body").css({
        backgroundColor : arr[parseInt(Math.random() * 3)]
      });
}
changeColor();
setInterval(changeColor,3000);

自动更改背景颜色循环（jQuery / css？）

3 个答案: