Question

我只使用CSS创建图像滑块。我几乎完成了编码，但我无法弄清楚我必须做什么，以便图像在滑动时不会不成比例地缩放。我仍然希望他们填补div而不是100％拉伸我也不想剪切图像，因为我想（你）找到一种方法来做到这一点：）

以下是我的代码的一部分：

div#transition3 {
  width:480px; 
  height:360px; 
  -webkit-animation:trans2 12s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-box-sizing:border-box; 
  -webkit-background-origin:border-box; 
  background-scale:fill; 
}

@-webkit-keyframes trans2 /* Safari and Chrome */
{
  0%   {background:url('../img/1.jpg') no-repeat top left;}
  10%  {background:url('../img/1.jpg') no-repeat top left;}
  20%  {background:url('../img/2.jpg') no-repeat top left;}
  30%  {background:url('../img/2.jpg') no-repeat top left;}
  40%  {background:url('../img/3.jpg') no-repeat top left;}
  50%  {background:url('../img/3.jpg') no-repeat top left;}
  60%  {background:url('../img/4.jpg') no-repeat top left;}
  70%  {background:url('../img/4.jpg') no-repeat top left;}
  80%  {background:url('../img/5.jpg') no-repeat top left;}
  90%  {background:url('../img/5.jpg') no-repeat top left;}
  100% {background:url('../img/1.jpg') no-repeat top left;}
}

这是一个小提琴：http://jsfiddle.net/qDmS8/3/。我希望你知道我的意思并能够帮助我。

提前致谢！

Answer 1

不可能按照我想要的方式去做。执行此操作的最佳方法是为每个图像创建容器，然后将{CSS转换指定给它们，如http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html上所示

CSS3 background-image滑块：animate和background-size

1 个答案: