• 一款简洁的纯css3代码实现的动画导航


    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航。鼠标经过的时候以背景色以菱形渐变为长方形。效果图如下:

    在线预览   源码下载

    实现的代码。

    html代码:

      <div align="center" style="background-color: #ee1d27; padding: 20px;">
            <div class="contener_link">
                <div class="link_txt">
                    MENU ONE</div>
            </div>
            <div class="contener_link">
                <div class="link_txt">
                    MENU TWO</div>
            </div>
            <div class="contener_link">
                <div class="link_txt">
                    MENU THREE</div>
            </div>
        </div>

    css3代码:

       .contener_link
    {
      text-align: center;
      position: relative;
      width: 170px;
      height: 50px;
      cursor: pointer;
      display: inline-block;
    }
    .contener_link .link_txt
    {
      font-family:'Roboto';
      position: absolute;
      width: 150px;
      font-weight: 300;
      text-decoration: none;
      font-size:22px;
      padding: 10px;
      color: #ffffff;
    }
    .contener_link:hover
    {
      background-color: #f8b334;
      -webkit-animation-duration:1s;
      -webkit-animation-name: diaganim;
      -moz-animation-duration:1s;
      -moz-animation-name: diaganim;
      -ms-animation-duration:1s;
      -ms-animation-name: diaganim;
      animation-duration:1s;
      animation-name: diaganim;
    }
    @-webkit-keyframes diaganim 
    {
      0% {-webkit-transform: skewX(-80deg);}
      100% {-webkit-transform: skewX(0deg);}
    }
    @-moz-keyframes diaganim 
    {
      0% {-moz-transform: skewX(-80deg);}
      100% {-moz-transform: skewX(0deg);}
    }
    @-ms-keyframes diaganim 
    {
      0% {-ms-transform: skewX(-80deg);}
      100% {-ms-transform: skewX(0deg);}
    }
    @keyframes diaganim 
    {
      0% {transform: skewX(-80deg);}
      100% {transform: skewX(0deg);}
    }

    注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/9607

  • 相关阅读:
    hmac模块
    hashlib模块
    内存监控
    在全局对象(不是指针)的构造函数里不要对std集合做太多操作
    Lucene 4.X 倒排索引原理与实现
    Git工作流指南
    Spring cloud 框架 --- Eureka 心得
    分布式 的理解
    集群的理解
    Thrift框架-安装
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4064215.html
Copyright © 2020-2023  润新知