使 CSS 背景图像不断变化 jQuery 以模仿闪烁

Question

我希望连续循环一组相同但会改变颜色的背景图像以模仿某种颜色变化效果（我已经尝试使用嵌入式 SVG 填充，但它无法按需工作）

最初的想法是添加和删除包含背景图片 url 的类。但我真的不确定该怎么做？可以通过 .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');
        }
    });

Answer 1

CSS3 解决方案：

使用CSS3动画以特定间隔改变background-color。

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>

Answer 2

您可以将颜色放在一个数组中，然后使用取模运算符 % 和 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>

Answer 3

Roy 的解决方案是一个很好的开始，但是问题是要求更改图像的颜色，而不是背景颜色。由于OP明确表示图像是相同的并且她正在尝试实现颜色变化效果，因此我建议使用部分透明的叠加层。我在 this codepen.

中使用了 before 伪元素和 Roy 的技术来完成它

有几点需要注意：

容器必须是相对位置的，这样绝对定位的叠加层才会保持在容器的边界内。
任何需要显示在叠加层顶部的子项也需要是相对位置的。如果从 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;}
}

使 CSS 背景图像不断变化 jQuery 以模仿闪烁

Make CSS background image continuously change jQuery to mimic flashing

css

jquery

svg

addclass

background-image