css3控制多重动画效果
今天看到一个类似于门窗开关效果。想着用css3实现,当然js是可以必须能够实现的。我主要想体验一把css3的神奇。
0102
01图片缩小,缩小到看不到之后,出现02图片放大的效果。
实现原理:用一个外层div来触发hover效果,里面套两个图片div,
分别为图一和图二
主要使用css3的transform和transition效果,而且比较重点的是transition-delay延时属性。
具体代码
html--------------------------
<div id="out"> <div id="in1"> <img src="./images/990ad_01.jpg"></div> <div id="in2"> <img src="./images/990ad_03.jpg"></div> </div>css部分---------------------------------------
#out{width:321px; height:339px; overflow:hidden; position:relative;} #in1{float:left;} #in2{display:block; float:left;transform:scale(0,1);} #out:hover #in1{transform:scale(0,1); transition:all 0.5s linear;} #out:hover #in2{transition:all 0.3s linear 0.35s;transform:scale(1,1); display:block; float:left; position:absolute; top:0px; left:0px;}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。