二话不说，先贴上代码，这个简单的动画我花了几分钟就写好了！(*^__^*) 嘻嘻……自恋一下啊
<!Doctype html> <html> <head> <title>Scale</title> <style type='text/css'> .wrap{ background:#FFFFFF; width:200px; height:50px; border:1px solid #CCCCCC; border-radius:4px; //圆角 margin:50px auto 0px; -webkit-transition:all 1s 1 ease-in-out; //引用webkit的过渡效果语句 text-align:center; } .wrap:hover{ background:-webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#EEEEEE)); //背景线性渐变 -webkit-transform:scale(1.2); //规模变大为1.2倍 -webkit-box-shadow:2px 4px 6px #555555; //wrap阴影效果 } </style> </head> <body> <div class='wrap'></div> </body> </html>
效果如下截图：
大家贴上代码试一下吧，记住用webkit内核的浏览器（chrome，safrai）.好用的话，记得顶一下，谢谢支持！O(∩_∩)O~
注：http://www.daqianduan.com/site/ (大前端的导航效果) 本人没看它的代码，只是看到这个效果，自己就想动手做个试试！
扫一扫
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
