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

O_o华丽丽
  • 130

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

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

回复
阅读 4.2k
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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏