这大概是晚上最简单的翻牌效果了吧 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style type="text/css">
 7     * {
 8       margin: 0;
 9       padding: 0;
10     }
11 
12     html, body {
13       height: 100%;
14     }
15 
16     .wrapper {
17       position: relative;
18       width: 200px;
19       height: 200px;
20     }
21 
22     .wrapper:hover .font {
23       transform: rotateY(90deg);
24       transition: 200ms linear;
25     }
26 
27     .wrapper:hover .back {
28       transform: rotateY(0deg);
29       transition: 200ms linear 200ms;
30     }
31 
32     .font {
33       position: absolute;
34       width: 200px;
35       height: 200px;
36       background: yellow;
37       z-index: 10;
38       transition: 200ms linear 200ms;
39     }
40 
41     .back {
42       position: absolute;
43       width: 200px;
44       height: 200px;
45       background: red;
46       transition: 200ms linear;
47       transform: rotateY(90deg);
48     }
49   </style>
50 </head>
51 <body>
52   <div class="wrapper">
53     <div class="font"></div>
54     <div class="back"></div>
55   </div>
56 </body>
57 </html>

 

posted @ 2018-04-13 15:58  点点圈圈一个夏天  阅读(182)  评论(0)    收藏  举报