CSS3+HTML5特效2 - 翻转效果

先看效果,鼠标移上去看看。

back
front

 

 

 

1. 本实例需要以下元素

    a. 容器BOX

    b. 默认显示元素FRONT

    c. 翻转显示元素BACK

2. 容器BOX的Height为200px,Width为200px;

1 .box2{
2   position: relative;
3   top: 20px;
4   left: 20px;
5   width: 200px;
6   height: 200px;
7   border: 1px solid #ccc;
8   overflow: hidden;
9 }

 

3. 默认显示和翻转显示的元素Height为100%,Width为100%,Css中包含翻转效果动画代码;

 1 .front2{
 2   position: absolute;
 3   top: 0px;
 4   left: 0px;
 5   width: 100%;
 6   height: 100%;
 7   background: #ff0000;
 8   -webkit-transform: scaleX(1);
 9   transform: scaleX(1);
10   -webkit-transition:1s 1s all ease;
11   transition:1s 1s all ease;
12 }
13 .back2{
14   position: absolute;
15   top: 0px;
16   left: 0px;
17   width: 100%;
18   height: 100%;
19   background: #00ff00;
20   -webkit-transform: scaleX(0);
21   transform: scaleX(0);
22   -webkit-transition:1s all ease;
23   transition:1s all ease;
24 }

 

4. 增加鼠标移入效果;

 1 .box2:hover .front2{
 2   -webkit-transform: scaleX(0);
 3   transform: scaleX(0);
 4   -webkit-transition:1s all ease;
 5   transition:1s all ease;
 6 }
 7 .box2:hover .back2{
 8   -webkit-transform: scaleX(1);
 9   transform: scaleX(1);
10   -webkit-transition:1s 1s all ease;
11   transition:1s 1s all ease;
12 }

 

5. HTML页面内容;

1 <div class="box2">
2   <div class="back2">back</div>
3   <div class="front2">front</div>
4 </div>

 

存在的问题:当鼠标移入后,迅速将鼠标移出,翻转效果还会继续,直到完成为止。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。