Question

我想要放置一个大图像，这将是＆＃34;滚动＆＃34; up＆amp;在<div>元素内。问题是图像＆＃39; size被拉伸到#animation-win div元素的大小。图像＆＃39;高度大于300px，这就是为什么我要向上和向下滚动它以便它可以在300px div元素中以原始大小显示的原因。可以吗？非常感谢你。

这是html：

<div id="animation-win">
 <div class="anim">
 </div>
</div>

这是我的CSS：

#animation-win {

    background:#000;
    position: relative;
    width:900px;
    height:300px;
}

.anim
{

     background-image:url('../images/picture1.jpg');
     background-size: 100% 100%;
     position:absolute;
     animation:cssanim 5s infinite;
     animation-direction:alternate;

     /* Safari and Chrome */
     -webkit-animation:cssanim 5s infinite;
     -webkit-animation-direction:alternate;
}

@keyframes cssanim
{
     0%   {background:red; left:0px; top:0px;}
     100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes cssanim /* Safari and Chrome */
{
0%{
    background-image:url('../images/picture1.jpg'); 
    width:100%;
    height:100%;
    left:0px; 
    top:0px;
    background-size: 100% 100%;
    }
100% {
    background-image:url('../images/picture1.jpg');
    width:100%;
    height:100%;
    left:0px; 
    bottom:549px;
    background-size: 100% 100%;
    }
}

Answer 1

300px的100％是300px。设置cssanim中的实际高度 - 然后它不会拉伸（这里是900px，如上所述），你可以让高度300px在#animation-win。

0%{
    background-image:url('1.gif'); 
    width:100%;
    height:900px; /* <---- */
    left:0px; 
    top:0px;
    background-size: 100% 100%;
    }
100% {
    background-image:url('1.gif');
    width:100%;
    height:900px; /* <---- */
    left:0px; 
    bottom:300px; /* <--- so the area not get entirely black in a long moment */
    background-size: 100% 100%;
    }
}

注意：使用1.gif 233 x 282 px进行测试，因此上述内容也应与您的图片一起有效。 jsfiddle http://jsfiddle.net/dLGBX/随机wikipaedia-image。

div元素内的CSS3图像动画延伸

1 个答案: