Question

我正在尝试创建一个关键帧，在视图秒后更改div容器的内容，但它不起作用。

这是我的代码：

@-webkit-keyframes k_home_projectSlider {
    0% {content: ".";}
    100% {content: "..";}
}
#home_projectSlider {
    height: 25em;
    width: 25em;
    border: 1px solid #000;
    margin: 10em;
    animation: k_home_projectSlider 5s;
    -webkit-animation: k_home_projectSlider 5s;
}

我的目标是改变图像，此刻我不知道多少次但超过一次。问题在于小提琴示例图像不适合div容器，尽管background-size设置为div width / height。但是，如果我将关键帧样式直接应用于div，它可以正常工作。

Fiddle Demo

Answer 1

可以使用以下CSS属性使background-image符合容器div的大小。

background-size: cover; /* instructs that the image should be expanded to cover the size of the container */
background-repeat: no-repeat; /* instructs that the image shouldn't be repeated if it doesn't take full size of container */

#slide {
  height: 25em;
  width: 25em;
  border: 1px solid #000;
  margin: 10em;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-animation: animation 2s infinite alternate;
}
@-webkit-keyframes animation {
  from {
    background-image: url(http://reebokcrossfitbarecove.com/wp-content/uploads/2014/01/Neuro-Linguistic-Programming.jpg);
  }
  to {
    background-image: url(http://www.manifestabundancenow.com/files/shutterstock_86188195.jpg);
  }
}

<div id="slide"></div>

@keyframes更改元素的内容

1 个答案: