css3+html5特效-向上滑动

css+html5特效-向上滑动

效果描述:切换的下拉和上拉状态

鼠标悬浮:下拉鼠标离开:上拉

　　/*外容器设置*/
　　.box1{position:relative;top:100px;left:100px;width:200px;height:200px;border:1px solid #ccc;overflow:hidden;}
　　/*内容器*/
　　.border1{position:absolute;top:-100%;left:0;width:100%;height:200%;transform:translateY(0px);transition:1s all ease;}
　　.front1,.back1,.three{width:100%;height:50%;}
　　.front1{background:#ff0000;}
　　.back1{background:#00ff00;}
　　.box1:hover .border1{transform:translateY(50%);/*transform:translateY(-50%);*/transition:1s all linear;}

　　<div class="box1">
　　<!--外容器-->
　　　　<div class="border1">
　　　　<!--内容器-->
　　　　　　<div class="back1"></div>
　　　　　　<div class="front1"></div>
　　　　　　<div class="three"></div>
　　　　</div>
　　</div>