Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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: 0left: 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-originbottom left 让锚点的位置进行颠倒。这样当鼠标移开时,允许动画的从另外一个方向消失

浏览器支持

支持率:97.5%
支持情况:

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步