这是我想要的效果示例:
http://photoswipe.com/
同样的效果也用于WhatsApp网络版中的图像缩放。
我想将元素(不仅仅是图片)缩放到中心,并使用动画从其位置缩放到页面中心。
动画应基于CSS,JS不应用于动画效果。
我尝试了以下代码,但未达到预期效果:
使用CSS:
http://photoswipe.com/
同样的效果也用于WhatsApp网络版中的图像缩放。
我想将元素(不仅仅是图片)缩放到中心,并使用动画从其位置缩放到页面中心。
动画应基于CSS,JS不应用于动画效果。
我尝试了以下代码,但未达到预期效果:
<div></div>
使用CSS:
div {
width: 100px; height: 100px; background: blue;
transition: transform 1s
}
div:hover {
transform: scale(2);
}
那么,使用transform:scale或width/height进行动画有什么区别呢?
谢谢。
编辑:
另外一种尝试:
http://jsfiddle.net/4w06Lvms/