【前端】CSS3实现弹出效果

最新推荐文章于 2023-11-16 07:00:00 发布

weixin_30950237

最新推荐文章于 2023-11-16 07:00:00 发布

阅读量101

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/raul-ac/p/3599411.html

版权

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还是有一些兴趣滴 ... 可是一旦写错就纠结了 ... 不懂这玩意肿么调试 ==

转载于:https://www.cnblogs.com/raul-ac/p/3599411.html

weixin_30950237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】CSS3实现弹出效果

36氪这个网站上的登录框弹出的时候挺帅气的，想知道它是怎么做的 .. 今天通过问新爷再加上自己琢磨琢磨写出一个小小Demo ～上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 6 div 7 { 8 width:100px; 9 height:100p...
复制链接

扫一扫