码迷,mamicode.com
首页 > Web开发 > 详细

css3控制多重动画效果

时间:2014-08-13 01:15:24      阅读:334      评论:0      收藏:0      [点我收藏+]

标签:css3   transform   transition   动画   

今天看到一个类似于门窗开关效果。想着用css3实现,当然js是可以必须能够实现的。我主要想体验一把css3的神奇。

bubuko.com,布布扣01bubuko.com,布布扣02


01图片缩小,缩小到看不到之后,出现02图片放大的效果。

实现原理:用一个外层div来触发hover效果,里面套两个图片div,

分别为图一bubuko.com,布布扣和图二bubuko.com,布布扣

主要使用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;}




css3控制多重动画效果,布布扣,bubuko.com

css3控制多重动画效果

标签:css3   transform   transition   动画   

原文地址:http://blog.csdn.net/shenshuai89/article/details/38524029

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!