讓CSS背景圖像不斷改變jQuery模仿閃爍

我期待着不斷循環一組背景圖像是相同的，但改變顏色來模仿一種顏色變化效果（我試過嵌入式SVG填充它不會按需要工作）讓CSS背景圖像不斷改變jQuery模仿閃爍

最初的想法是添加和刪除包含背景圖像網址的類。但我真的不知道該怎麼去做呢？可以循環通過.click功能，但我需要它從頁面加載連續發生。

任何幫助非常感謝。非常感謝

HTML：

<h1>Lets make 
    <span class="container--pop"> 
      <span class="container--pop__container"> 
       <span class="text--highlight text--highlight-red">this</span> 
      </span> 
    </span> 
change background. 
</h1>

CSS：

.text--highlight-red { 
    background:url('../images/sprites/brush-stroke.svg'); 
    background-repeat:no-repeat; 
    background-size:100%; 
    height: 1.5em; 
    padding: 0.3em 0.8em 0.5em 0.5em; 
} 

.text--highlight-green { 
    background:url('../images/sprites/brush-stroke-green.svg'); 
    background-repeat:no-repeat; 
    background-size:100%; 
    height: 1.5em; 
    padding: 0.3em 0.8em 0.5em 0.5em; 
} 

.text--highlight-orange { 
    background:url('../images/sprites/brush-stroke-orange.svg'); 
    background-repeat:no-repeat; 
    background-size:100%; 
    height: 1.5em; 
    padding: 0.3em 0.8em 0.5em 0.5em; 
}

JS：

$('.text--highlight').click(function(){ 
     if($(this).hasClass('text--highlight-red')) 
     { 
      $(this).addClass('text--highlight-green').removeClass('text--highlight-red'); 
     } 
     else 
     { 
      $(this).addClass('text--highlight-orange').removeClass('text--highlight-green'); 
     } 
    });

來源

2016-04-06 Sofi Smith

直視'的setInterval（）' –

你可以把顏色在一個陣列和使用模運算%與setInterval遍歷數組。

var colors = ['green', 'red', 'yellow', 'blue']; 
 

 
(function() { 
 
    var i = 0; 
 
    function changeBg() { 
 
    $('div').css('background-color', colors[i]); 
 
    i = (i+1) % colors.length; 
 
    } 
 

 
    setInterval(changeBg, 1000); 
 
})();

div { 
 
    height: 100vh; 
 
    background-color: blue; 
 
    transition: all 0.3s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

來源

2016-04-06 16:45:42

這是偉大的，但我怎麼會通過這個陣列（事後多少次循環有它繼續這樣做是不好！）哈哈謝謝 –

你可以添加像這樣的另一個計數器https://jsfiddle.net/Lg0wyt9u/528/ –

真棒。我只是更新了if語句，因爲它需要捲曲和缺少的分號，但所有的魔法 - 謝謝你都有道理:)'（function（）{ var i = 0; function changeBg（）{ // console。日誌（「改變我的顏色」）; $（'。text - highlight'）。css（'background-image'，colors [i]）; if（counter <8）{i =（i + 1）％colors.length; counter ++; } } setInterval（changeBg，300）; }）（）;' –

CSS3的解決方案：

使用CSS3動畫在具體的我改變background-color ntervals。

body { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-color: red; 
 
    animation-name: changeColor; 
 
    animation-duration: 2s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
@keyframes changeColor { 
 
    0% {background-color:red;} 
 
    25% {background-color:yellow;} 
 
    50% {background-color:blue;} 
 
    75% {background-color:green;} 
 
    100% {background-color:red;} 
 
}

<body></body>

來源

2016-04-06 16:44:52 Roy

羅伊的解決方案是一個很好的開始，但問題是要求改變的圖像，而不是背景色的顏色。由於OP特意說圖像是相同的，並且她試圖實現顏色變化效果，所以我建議使用部分透明覆蓋圖。我用前僞元素和羅伊的技術在this codepen中完成它。

幾件事情要注意：

容器必須是相對的位置，使得絕對定位的覆蓋將保持容器的範圍內。
任何需要在疊加層上顯示的孩子也需要相對位置。如果您從h1中刪除相對位置，您會看到它顯示在疊加層後面。

這裏是代碼：

<div class="container"> 
    <h1>This is on top of the overlay</h1> 
</div> 


.container { 
    position: relative; 
    display: block; 
    width: 640px; 
    height: 480px; 
    background: url('http://lorempixel.com/image_output/cats-q-c-640-480-1.jpg') no-repeat; 
} 
.container:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    opacity: .3; 

    background-color: red; 
    animation-name: changeColor; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
} 

h1 { 
    position: relative; 
    color: #fff; 
    font-family: arial; 
} 

@keyframes changeColor { 
    0% {background-color:red;} 
    25% {background-color:yellow;} 
    50% {background-color:blue;} 
    75% {background-color:green;} 
    100% {background-color:red;} 
}

來源

2016-04-06 17:21:43 developering

讓CSS背景圖像不斷改變jQuery模仿閃爍

回答

相關問題