鼠标悬停,文字颜色逐渐改变是怎样实现的??

如下图所所示的效果:
图片描述

鼠标悬停后,文字和下面的进度条颜色都逐渐改变。
新人求教,求大神指导,麻烦通俗一点,谢谢啦。^_^

阅读 2.6k
评论 2017-07-16 提问
    2 个回答

    图片描述

    出现的效果是每次走到最后一个字的时候都会卡一下,和下面进度条不是同步的

    结构部分代码

                    <ul class="nav">
                        <li>
                            <div class="item">
                                <a>首页</a>
                                <a class="mask">首页</a>    
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <a>工作经历</a>
                                <a class="mask">工作经历</a>
                            </div>
                        </li>                    
                        <li>
                            <div class="item">
                                <a>个人技能</a>
                                <a class="mask">个人技能</a>    
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <a>我的作品</a>
                                <a class="mask">我的作品</a>    
                            </div>    
                        </li>
                        <li>
                            <div class="item">
                                <a>联系我</a>
                                <a class="mask">联系我</a>    
                            </div>
                        </li>
                    </ul>
                    
                    

    样式部分代码:

            .nav{float: right;}
            .nav li{display: inline-block;margin: 10px 12px;font-size: 16px;line-height: 40px;}
            .nav .item{position: relative;}
            .nav li a{color: #fff;display: inline-block;}
            .nav .item .mask{width: 0;height:40px;border-bottom:2px solid #00A78E;overflow: hidden;
            position: absolute;left:0;top:0;transition: width .5s;}
            .nav .item .mask{color: #00A78E;}
            .nav li:hover .mask{width:100%}
    

    我自己重新试了下,还是不知道怎样解决,按照你之前的提示,我在外面加了个空盒子。但是,<span>标签里包裹的标签的宽度并没有被它的内容撑开,我不想给a标签设定一个固定宽度,想让它的内容自适应。
    修改后样式部分的代码:

            .nav{float: right;}
            .nav li{display: inline-block;margin: 10px 12px;font-size: 16px;line-height: 40px;}
            .nav .item{position: relative;}
            .nav li .mask{width: 0;overflow: hidden;position: absolute;left:0;top:0;transition: width 10s;}
            .nav li a{color: #fff;display: inline-block;}
            .nav .item .mask a{height:40px;border-bottom:2px solid #00A78E;color: #00A78E;}
            .nav li:hover .mask{width:100%}
    

    修改后结构部分代码:

                    <ul class="nav">
                        <li>
                            <div class="item">
                                <a>首页</a>
                                <span class="mask"><a>首页</a></span>
                            </div>
                        </li>
                    </ul>
                    
    评论 赞赏

      外层弄个遮罩,包裹一层颜色不一样的节点副本,改变遮罩宽度就能实现类似效果

      <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
          .wrapper {
            position: relative;
            background: #000;
            display: inline-block;
            font-size: 40px;
          }
      
          .base {
            color: #fff;
            padding: 10px;
          }
      
          .mask {
            transform-origin: left;
            overflow: hidden;
            transition: width 2s;
            width: 0;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
          }
          
          .mask .base {
            color: green;
          }
      
          .wrapper:hover .mask  {
            width: 100%;
          }
        </style>
      </head>
      <body>
        <div class="wrapper">
          <div class="base">home</div>
          <div class="mask">
            <div class="base">home</div>
          </div>
        </div>
      </body>
      </html>
      评论 赞赏
        撰写回答

        登录后参与交流、获取后续更新提醒