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>
把w3school上的CSS3教程刷了一下，还是有些收获的，虽然可能过几天都不记得了，但是捡起来快啊 ～
发现对CSS还是有一些兴趣滴 ... 可是一旦写错就纠结了 ... 不懂这玩意肿么调试 ==