禁用img缩放/调整大小? (如何获得“揭示效果”?)

时间:2011-12-11 23:04:40

标签: javascript html css html5 css3

我有一个img元素。但我希望在我增加宽度的同时关闭其调整大小的“能力”。

这是一个动画,让我的外表从左到右慢慢显露出来。

但是,如果调整宽度/缩放到宽度是,它看起来不像图像缓慢显示,但看起来它的宽度会慢慢增长,这不是我想要的。 < / p>

我正在使用javascript来增加宽度,有没有办法让图像调整大小关闭?也许我可以将css 显示位置设置为某些内容?

我只为iPad开发,所以我最好的解决方案是CSS3属性或HTML5方法。

2 个答案:

答案 0 :(得分:1)

这实际上与another question from today非常相似。

你可以把你的形象放在div中;给div设置样式

overflow:hidden; 
width:0px;

然后将div的宽度设置为图像的整个宽度,并从左到右缓慢显示。

答案 1 :(得分:0)

使用包装divoverflow:hidden;非常容易我使用了CSS3动画,但这个概念非常重要。

div{overflow:hidden; 
    -webkit-animation: imageHide 5s infinite;}

@-webkit-keyframes imageHide {
        0%   { width: 0px; }
        100% { width: 300px; }
}

Demo