当前位置: 首页 > 建站技术 > 编程语言 > 正文

  • 标签
  • 源码
  • 特效
  • CSS3线性动态效果文字导航菜单动画特效代码

                              效果图


    嗨,长友们大家好

    今天分享的是一款黑色个性的线性动态效果导航菜单代码,CSS3镜像文字导航菜单动画特效。

    废话不多说上代码

    JS源码

    <script>

    //For Demo only

    var links = document.getElementsByClassName('link')

    for(var i = 0; i <= links.length; i++)

    addClass(i)

    function addClass(id){

    setTimeout(function(){

    if(id > 0) links[id-1].classList.remove('hover')

    links[id].classList.add('hover')

    }, id*750)

    }

    </script>

    网站源码

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>CSS3线性动态效果文字导航菜单动画特效</title>

    <style>

    html, body{

    padding:0px;

    margin:0px;

    font-family: 'Raleway', sans-serif;

    color:#FFF;

    height:100%;

    }

    body{

    background:rgba(0, 0, 0, 0.5);

    }

    .container{

    max-width:200px;

    background:rgba(0, 0, 0, 0.75);

    margin:40px auto;

    padding:10px 0px 20px 0px;

    border:1px solid #111;

    border-radius:4px;

    box-shadow:0px 4px 5px rgba(0, 0, 0, 0.75);

    }

    .link{

    font-size:16px;

    font-weight:300;

    text-align:center;

    position:relative;

    height:40px;

    line-height:40px;

    margin-top:10px;

    overflow:hidden;

    width:90%;

    margin-left:5%;

    cursor:pointer;

    }

    .link:after{

    content: '';

    position:absolute;

    width:80%;

    border-bottom:1px solid rgba(255, 255, 255, 0.5);

    bottom:50%;

    left:-100%;

    transition-delay: all 0.5s;

    transition: all 0.5s;

    }

    .link:hover:after,

    .link.hover:after{

    left:100%;

    }

    .link .text{

    text-shadow:0px -40px 0px rgba(255, 255, 255, 1);

    transition:all 0.75s;

    transform:translateY(100%) translateZ(0);

    transition-delay:all 0.25s;

    }

    .link:hover .text,

    .link.hover .text{

    text-shadow:0px -40px 0px rgba(255, 255, 255, 0);

    transform:translateY(0%) translateZ(0) scale(1.1);

    font-weight:600;

    }</style>

    </head>

    <body><script src="/demos/googlegg.js"></script>

    <div class="container">

    <div class="link">

    <div class="text">首页</div>

    </div>

    <div class="link">

    <div class="text">关于我们</div>

    </div>

    <div class="link">

    <div class="text">产品中心</div>

    </div>

    <div class="link">

    <div class="text">项目案例</div>

    </div>

    <div class="link">

    <div class="text">人才招聘</div>

    </div>

    <div class="link">

    <div class="text">联系我们</div>

    </div>

    </div>

    <script>

    //For Demo only

    var links = document.getElementsByClassName('link')

    for(var i = 0; i <= links.length; i++)

    addClass(i)

    function addClass(id){

    setTimeout(function(){

    if(id > 0) links[id-1].classList.remove('hover')

    links[id].classList.add('hover')

    }, id*750)

    }

    </script>

    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

    <p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>

    <p>来源:<a href="http://www.aaa-cg.com.cn?lcc" target="_blank">素材</a></p>

    </div>

    </body>

    </html>


    关注创业、电商、站长,扫描方便乐网站微信二维码,定期抽大奖。

    【版权与免责声明】如发现内容存在版权问题,烦请提供相关信息发邮件至2723741405@qq.com,我们将及时沟通与处理。本站内容除非来源注明方便乐,否则均为网友转载,涉及言论、版权与本站无关。

    本文永久链接:http://www.fangbianle.com/news/show-255316.html

  • 营销
  • 创业
  • 电商
  • 微商
  • 那些关于抽奖你不知道的事,其实吸粉也得靠套路!
    内容运营:如何借助热点,让你的产品一炮走红
    营销策划的流程
    万商汇:移动营销从粗放走向精细化
    好活动才得人心,可是什么样的活动才是好活动呢?
    如何才能将社群成员转化为客户呢?提升转化率的几点小妙招奉上
    营销策划功效
    如何才能写出让客户无法拒绝的文案!必看十大秘诀