CSS 动画 - 下划线动画

2019-08-13

描述

当光标在文本上移动时，为其创建一个可以移动的下划线效果。

HTML

<p class="hover-underline-animation">Hover this text to see the effect!</p>

CSS

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

Demo

说明

1. display: inline-block 让块元素 p 成为一个 inline-block，让下划线的宽度和内容（文本）宽度一致，进而避免下划线宽度超出内容（文本）和其父元素宽度一致
2. position: relative 相对于伪元素而言，为其在父元素上重新建立一个笛卡尔坐标系
3. ::after 定义一个伪元素
4. position: absolute 使伪元素脱离文档流的布局，使其能够相对于他的父亲进行绝对定位
5. width: 100% 确保伪元素能够横跨整个文本块的宽度
6. transform: scaleX(0) 设置伪元素的比例为 0，让其没有宽度，也不可见
7. bottom: 0 和 left: 0 让元素位于整个块的左下位置
8. transition: transform 0.25s ease-out 表示 transform 的变化将需要 0.25 秒，且使用 ease-out 时间函数来进行过渡
9. transform-origin: bottom right 表示动画的锚点以块的右下角为原点
10. :hover::after 使用 scaleX(1) 让宽度变为 100%，然后修改 transform-origin 为 bottom left 让锚点的位置进行颠倒。这样当鼠标移开时，允许动画的从另外一个方向消失

浏览器支持

支持率：97.5%
支持情况：

• https://caniuse.com/#feat=transforms2d
• https://caniuse.com/#feat=css-transitions

返回总目录

每天 30 秒系列之 CSS