image - CSS3 背景图像 slider : animate and background-size

Question

我仅使用 CSS 创建图像 slider 。我几乎完成了编码，但我不知道我必须做什么才能使图像在滑动时不会不成比例地缩放。我仍然希望它们填充 div 而不是 100% 拉伸(stretch)，我也不想剪切图像，因为我希望(你)想出一种方法来做到这一点:)

这是我的部分代码:

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

这是一个 fiddle :http://jsfiddle.net/qDmS8/3/ .我希望你明白我的意思并能帮助我。

提前致谢!

Answer 1

不可能按照我想要的方式去做。最好的方法是为每个图像创建容器，然后为它们分配 CSS 转换，如 http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html 中所示。