CSS3 Transition 元素hover上变大的一系列效果（仿大前端导航）

最新推荐文章于 2023-05-23 12:07:48 发布

zhailulu

最新推荐文章于 2023-05-23 12:07:48 发布

阅读量6.5k

点赞数

分类专栏： html5 css3 Web 开发文章标签： transition css webkit chrome border 浏览器

本文链接：https://blog.csdn.net/zhailulu/article/details/6894818

版权

Web 开发同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

css3

9 篇文章 0 订阅

订阅专栏

二话不说，先贴上代码，这个简单的动画我花了几分钟就写好了！(*^__^*) 嘻嘻……自恋一下啊

<!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/ (大前端的导航效果) 本人没看它的代码，只是看到这个效果，自己就想动手做个试试！

zhailulu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 Transition 元素hover上变大的一系列效果（仿大前端导航）

二话不说，先贴上代码，这个简单的动画我花了几分钟就写好了！(*^__^*) 嘻嘻……自恋一下啊 Scale .wrap{ background:#FFFFFF; width:200px; height:50px; border:1px solid #CCCCCC;
复制链接

扫一扫

专栏目录