一个CSS伪类动画效果(鼠标悬浮边框从左往右增长)

最新推荐文章于 2024-04-08 18:25:41 发布

Daemon.

最新推荐文章于 2024-04-08 18:25:41 发布

阅读量959

点赞数

分类专栏： html css 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_44927516/article/details/127148316

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

简单聊聊

最近没有在写webgl相关的东西在做官网和一些普通页面前两天我们产品经理说要更新官网让我去看了一个鼠标动画效果效果是这个官网的导航栏效果
一开始我是比较麻爪的，我不太熟悉css样式(大部分时候我都是用canvas去画哈哈哈) 后来我想了一会儿可以用transiton去写不熟悉的可以转到这个里面看一下
说了这么多，会的应该都会了。我把代码放上来，供有需要的人参考也为自己Mark一下。

页面部分

      <Col span={8} push={9} className={style.headright}>
        <Row gutter={8} className={style.nav}>
          {sidebarArray?.map(
            (i: { [index: string]: string }, index: number) => (
              <Col
                className={style.navitems}
                span={4}
                key={'nav_' + index}
                onClick={() => {
                  history.push(i.jumpto);
                }}
              >
                <span>{i.text}</span>
              </Col>
            ),
          )}
        </Row>

css部分

    .navitems {
      height: 50px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .navitems::after {
      content: '';
      width: 0;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #0858bb;
      transition: width 0.5s ease 0s;
    }
    .navitems:hover::after {
      width: 100px;
    }