zoukankan      html  css  js  c++  java
  • 一款简洁的纯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

  • 相关阅读:
    nginx 详解
    阿里云 消息队列mq
    手机浏览器Yandex安装插件说明
    windows下JAVA环境变量配置
    共享文件夹免密登入
    自动添加静态路由
    加入WSUS补丁服务器并下载补丁
    加入时间同步服务器(NTP)
    更改rdp端口
    关闭及开启445等危险端口
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4064215.html
Copyright © 2011-2022 走看看