【前端】CSS3实现弹出效果

浏览数：20 / 时间：2015年06月09日

36氪这个网站上的登录框弹出的时候挺帅气的，想知道它是怎么做的 .. 今天通过问新爷再加上自己琢磨琢磨写出一个小小Demo ～

上代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 
 6 div
 7 {
 8 width:100px;
 9 height:100px;
10 background:red;
11 }
12 
13 div:hover
14 {
15 opacity:1;
16 width:200px;
17 height:200px;
18 background:blue;
19 position:relative;
20 
21 animation:showPanel 5s ease;
22 -moz-animation:showPanel 5s ease-in;
23 -webkit-animation:showPanel 0.5s ease;
24 }
25 
26 @keyframes showPanel
27 {
28 0%   {transform:scale(0.5);opacity:0.0;}
29 50%  {transform:scale(1.05);opacity:1.0;}
30 100% {transform:scale(1);opacity:1.0;}
31 }
32 
33 /* Firefox */
34 @-moz-keyframes showPanel 
35 {
36 0%   {-moz-transform:scale(0.5);opacity:0.0;}
37 50%  {-moz-transform:scale(1.05);opacity:1.0;}
38 100% {-moz-transform:scale(1);opacity:1.0;}
39 }
40 
41 /* Safari and Chrome */
42 @-webkit-keyframes showPanel 
43 {
44 0%   {-webkit-transform:scale(0.75);opacity:0.0;}
45 50%  {-webkit-transform:scale(1.05);opacity:1.0;}
46 100% {-webkit-transform:scale(1);opacity:1.0;}
47 }
48 
49 </style>
50 </head>
51 
52 <body>
53 
54 <p>把鼠标放到红色方块上看效果</p>
55 <p><b>注释：</b>仅调试了chrome .. 其他的浏览器不知道好不好用 .. 因为懒没测试过 .. 不过知道这个怎么玩了^_^</p>
56 
57 <div></div>
58 
59 </body>
60 </html>