Ema*_*ilă 3 html css css3 css-transitions
所以我有object一个div容器内部.该对象具有max-width (600px)和max-height (400px)属性集.当我将鼠标悬停的对象,该属性设置为none这样的对象width,并height可以适当地呈现.但移动鼠标了的时候object就立刻改变了它width,并height在max-width (600px)和max-height (400px)值,并在一秒钟后它回落到它的原始width和height值.
所以,我该怎么办的过渡,使object它的变化width和height顺利,双方,盘旋在它时和鼠标操作出来的时候.
HTML:
<html>
<!-- Blah blah some head tags here. -->
<body>
<div id="c_a">
<object data="https://www.google.ro/images/srpr/logo11w.png" type="image/png"></object>
</div>
</body>
</html>
CSS:
html{
font-size: larger;
width: 100%;
height: 100%;
}
#c_a object{
transition: width 1s linear .5s, height 1s linear .5s;
-webkit-transition: width 1s linear .5s, height 1s linear .5s;
-o-transition: width 1s linear .5s, height 1s linear .5s;
-moz-transition: width 1s linear .5s, height 1s linear .5s;
position: relative;
width: 100%;
height: 100%;
max-width: 600px;
max-height: 400px;
vertical-align: text-top;
}
#c_a object:hover{
width: 200%;
height: 200%;
max-width: none;
max-height: none;
}
问题是您没有在父元素上指定宽度.
您的百分比宽度object为100%.100%的是什么？在这种情况下,它是父元素宽度的100%div.如果父元素没有指定宽度,那么最终会出现这样的问题.
解决方案:在包装器上指定宽度div.
演示:http://jsfiddle.net/abhitalks/Pv4y4/4/
CSS:
div#c_a { width: 200px; } /* specify width on parent here */
#c_a object {
-webkit-transition: width 1s linear .5s, height 1s linear .5s;
width: 100%;
height: 100%;
...
}
#c_a object:hover {
width: 200%;
height: 200%;
max-width: none;
max-height: none;
}
注意:理想情况下,您还要height在父项上指定.
只要父指定的宽度在div规则范围内max-width就可以正常工作.但是,一旦初始宽度突破或接近max-width规则,则转换将使其超出该范围max-width,然后将快速恢复到原始宽度.
问题:单独指定转换width并且height不会起作用,因为它只尝试在这些属性上转换,因此max-会忽略它们.因此跳跃效果.
解决方案:首先,不要将max-es指定为none.由于您要将图像大小增加200%,因此请将这些指定为200%.其次,在没有特定属性的情况下指定转换.这使得所有相关属性都得到了转换,并将在一定程度上帮助缓解问题.
演示2:http://jsfiddle.net/abhitalks/Pv4y4/9/
CSS:
html, body { width: 100%; }
div#c_a { width: 60%; }
#c_a object {
-webkit-transition: 1s;
...
}
#c_a object:hover {
width: 200%;
height: 200%;
max-width: 200%;
max-height: 200%;
}
希望有所帮助.