我仅使用 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/ . 我希望你明白我的意思并能帮助我。
提前致谢!
最佳答案
不可能按照我想要的方式去做。 最好的方法是为每个图像创建容器,然后为它们分配 CSS 转换,如 http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html 中所示。
关于image - CSS3 背景图像 slider : animate and background-size,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15096226/