CSS 动画 - 下划线动画

Vanessa 大前端的点滴生活 本文由博客端 http://vanessa.b3log.org 主动推送
本贴最后更新于 326 天前,其中的信息可能已经水流花落

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

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    450 引用 • 375 回帖 • 5 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    148 引用 • 401 回帖

赞助商 我要投放

回帖
请输入回帖内容 ...