使用 CSS 设置动画滑块

Question

我正在构建一个 Drupal 网站。在主页上，我连续输出了三张图片。这三张图片是不同的新闻报道。我希望它从第二张和第三张图像上的红色透明覆盖开始。 5 秒后，我希望第一张和第三张图像具有该叠加层，再过 5 秒后，我希望第一张和第二张图像具有该叠加层。因此，每 5 秒下一张图像 'highlighted' 没有叠加层。

我在这里和互联网上搜索了很多，我尝试了 CSS 关键帧，但我无法让它工作。这是一个图像示例，它应该如何开始： http://i.stack.imgur.com/2ciWp.jpg

谁能帮帮我？提前致谢！

PS：我使用OWL滑块输出图像

Answer 1

您可以使用 background:url(...)，然后在 div 上使用 :before 伪元素。你必须玩弄时间（还有延迟），但这样的事情会起作用：

div{
  width:150px;
  height:150px;
  position:relative;
  display:inline-block;
  background:url(http://placekitten.com/g/300/300);
  background-size:100% 100%;
  }
div:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:rgba(255,0,0,0.3);
  -webkit-animation: showw 6s infinite;
  animation: showw 6s infinite;
  }

div:nth-child(2):before{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  }

div:nth-child(3):before{
    -webkit-animation-delay: 4s;
  animation-delay: 4s;
  }

@-webkit-keyframes showw{
  0%, 30% {background:rgba(255,0,0,0);}
  35%, 60% {background:rgba(255,0,0,0.3);}
  }
@keyframes showw{
  0%, 30% {background:rgba(255,0,0,0);}
  35%, 60% {background:rgba(255,0,0,0.3);}
  }

<div></div>
<div></div>
<div></div>

使用 CSS 设置动画滑块

Animate Slider with CSS

css

jquery

slider