• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

鼠标经过线条变长、向四周延伸的css效果

代码笔记 barben 3年前 (2020-05-28) 3542次浏览 0个评论

效果如图所示:

<div class="tab">
  嘿!八本那年~
  <div class="tab-class-fir"></div>
  <div class="tab-class-sec"></div>
</div>
.tab{
    display: inline-block;
    padding: 0 15px;
    line-height: 35px;
    cursor: pointer;
    transition: all 0.23s;
    position: relative;
}

.tab:before,
.tab:after,
.tab-class-fir,
.tab-class-sec {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.23s;
}

.tab:hover {
    color: #fff;
    background-color: #a29bfe;
}

.tab:before {
    border-top: 1px solid #000;
}

.tab:after {
    border-bottom: 1px solid #000;
}

.tab-class-fir {
    border-left: 1px solid #000;
}

.tab-class-sec {
    border-right: 1px solid #000;
}

.tab:hover:before {
    width: calc(100% + 10px);
    left: -10px;
    /* left: -5px; */
}

.tab:hover:after {
    width: calc(100% + 10px);
    left: 0;
    /* left: -5px; */
}

.tab:hover > .tab-class-fir {
    height: calc(100% + 10px);
    top: 0;
    /* top: -5px; */
}

.tab:hover > .tab-class-sec {
    height: calc(100% + 10px);
    top: -10px;
    /* top: -5px; */
}

上方css代码有四句hover,把他们的top或left更换成注释掉的那句试试看?


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
鼠标经过线条变长、向四周延伸的css效果 - https://www.barben.cn/code/829.html
喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址