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">backdiv>
3   <div class="front2">frontdiv>
4 div>

 

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

转载于:https://www.cnblogs.com/z-gia/p/3526239.html