CSS实现酷炫动态下划线效果

先上效果：

  <div class="words">兔几🐇你好鸭div>

	*{margin: 0;padding: 0;}.words {width: 200px;height: 50px;line-height: 50px;text-align: center;position: absolute;left: 50%;top: 50%;font-size: 23px;transform: translate(-50%, -50%);}.words::before {content: '';position: absolute;left: 0;width: 200px;transform: scaleX(0);transform-origin: right;bottom: 0;height: 2px;background: hotpink;transition: transform .5s cubic-bezier(0.93, 0.07, 0.17, 1);}div:hover::before {transform: scaleX(1);transform-origin: left;}

主要说一下css部分：

这个就是我们显示在div里的一句话，设置div的宽高，绝对定位，文字居中，left: 50%; top: 50%;transform: translate(-50%, -50%); 是让整个div处于页面中心位置

下面给这个div加一个伪类，也设置绝对定位，宽度200px，高2px，颜色分红，处于底部bottom，变换方式是transform: scaleX(0)，也就是说初始状态是看不到的(0倍缩放)，补间动画设置的是对transform属性做动画效果，时间是0.5s，这里有个很重要的一点就是transform-origin: right，这样设置就让变换的顶点处于右边

注意，hover属性不能写成div::before:hover,应该是div:hover::before

hover属性设置正常大小，但是变换原点设置在左边，意思就是hover状态时候，从scaleX(0)变到scaleX(1)，怎么变呢，从左边开始变！

结合上面.words::before的写法，可以得出，hover状态一结束，立马要从scaleX(1)变到scaleX(0)，怎么变呢，最终的效果是caleX(0)，原点在右边，所以当然要往右边收缩啦！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！