如何淡化背景而不是仅仅改变颜色

Posted 2023-02-21

【中文标题】如何淡化背景而不是仅仅改变颜色

【英文标题】：How to fade background instead of just change color

【发布时间】：2014-03-13 11:46:46

【问题描述】：

我试图让我的背景褪色成颜色，而不仅仅是改变。如果可能的话，我也想让它重复一遍！

我现在正在使用 JQuery 来更改正文的 CSS。

$(document).ready(function()
     var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"];
     var i = 0;
     var bgRotate = setInterval(function()    
         $('body').css('backgroundColor' : bgColor[[i]]);
         i++;
      , 1000);   

     );

这是fiddle。

【问题讨论】：

见 ***.com/questions/190560/… 有一个 jquery 插件和一个 CSS only 答案

【参考方案1】：

只需使用CSS transitions。它们比 jQuery 的过渡更流畅，并具有 CSS 的所有通常优点（级联、不需要 JS 等）

body  transition: background-color 1s 

要让它重复，请执行以下操作：

$('body').css('backgroundColor' : bgColor[i%bgColor.length]);

它对数组长度进行除法余数（模）运算。

【参考方案2】：

看this问题

使用jQueryUI框架你可以做到：

$('body').animate(backgroundColor: '#FF0000', 'slow');

【讨论】：

这个***.com/questions/967815/…

是的，现在可以使用了。它曾经是 [1]，而不是链接。还是你编辑的？

在您提出评论之前对其进行了编辑 :)

哦...这就解释了。 :P

【参考方案3】：

您可以尝试使用 jQuery 的 animate() 方法对其进行动画处理。假设您有一个带有 CSS 设置的 DIV

#yourDiv
    background-color: #FFFFFF;
    width: 100px;
    height: 100px;

并且您希望在单击 ID 为 darkenButton 的 DIV 后，在 5 秒内将其设置为黑色。可以使用点击事件：

$('#darkenButton').click(function()
    $('#yourDiv').animate(
        background-color: '#000000'
    , 5000); 
);

【参考方案4】：

您必须使用 .animate() 而不是 .css()。对于重复，您必须创建一个函数：

function changeColor(i) 
    var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"];
    if(i > bgColor.length)  i = 0; 
    $('body').animate('backgroundColor' : bgColor[[i]]);
    var bgRotate = setTimeout(function()     
        changeColor(++i);
    , 1000); 

【参考方案5】：

你可以使用 css3 来做到这一点:)

@-webkit-keyframes blink 
    0%    background:red; 
    50%   background:green;
    100%  background:red; 
 
 @-moz-keyframes blink 
    0%    background:red; 
    50%   background:green;
    100%  background:red; 
 
 @-ms-keyframes blink 
    0%    background:red; 
    50%   background:green;
    100%  background:red; 
 
  body
 -webkit-animation: blink 1s infinite;
 -moz-animation:    blink 1s infinite;
 -ms-animation:     blink 1s infinite;
 

【参考方案6】：

为什么不使用 @keyframes 的 CSS3 动画，因为这个问题也被标记为 CSS，所以想发布一个

一切都是不言自明的，只有animation: demo 3s infinite linear;这一行只是4个属性的简写，即

animation-name animation-duration animation-iteration-count animation-timing-function

在这里，我使用了infinite，因此它会不断迭代，并且我使用linear 以获得一致的动画。

Demo

html, body, div 
    height: 100%;
    width: 100%;


div 
    -webkit-animation: demo 3s infinite linear; 
    animation: demo 3s infinite linear;


@-webkit-keyframes demo 
    0% 
        background: #FF0000;
    
    33% 
        background: #0f0;
    
    100% 
        background: #f0f;
    



@keyframes demo 
    0% 
        background: #FF0000;
    
    33% 
        background: #0f0;
    
    100% 
        background: #f0f;
    

【讨论】：

是的，比JS好多了。

【参考方案7】：

当var i's到达array的末尾时，您可以简单地使用更改var i's的值，检查此http://jsfiddle.net/33VgU/3，这将无限重复背景，如果您随机更改颜色而不是使用Math.random函数来获取var i 的值。

【讨论】：

对于淡入淡出，您可以使用 animate() 函数而不是 css()。

那么你应该修正你的答案。或者删除它，因为已经有答案说