Question

我希望不断循环浏览一组相同的背景图像，但改变颜色以模仿一种颜色变化效果（我已尝试使用嵌入式SVG填充，并且它不能按需工作）

最初的想法是添加和删除包含背景图片网址的类。但我真的不确定该怎么办呢？可以在.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动画以特定间隔更改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>

connect

Answer 2

您可以将颜色放在一个数组中，并使用模数运算符%和setInterval来循环遍历该数组。

＆＃13;

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);
})();

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

Roy的解决方案是一个很好的开始，但问题是要求改变图像的颜色，而不是背景颜色。由于OP特别说图像是相同的并且她试图实现颜色变化效果，我建议使用部分透明的叠加。我使用了之前的伪元素以及Roy的技术来在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;}
}

使CSS背景图像不断更改jQuery以模仿闪烁

3 个答案: