Question

我正在建立一个Drupal网站。在主页上，我连续输出了三张图像。这三个图像是不同的新闻文章。我希望它从第二和第三张图像上的红色透明覆盖开始。 5秒钟后，我希望第一张和第三张图像具有该叠加效果，再过5秒后，我希望第一张和第二张图像具有叠加效果。因此，每隔5秒，下一张图像就会被“突出显示”而没有叠加。

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

谁能帮助我？提前谢谢！

PS：我使用OWL Slider输出图像

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用CSS动画滑块

1 个答案: