美文网首页
鼠标经过底部下划线从中间放大的动画

鼠标经过底部下划线从中间放大的动画

作者: sunxiaochuan | 来源:发表于2021-06-21 10:53 被阅读0次

资料

参考代码:Base Element(可在线查看)

正文

源码

<head>
   <base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
  This link will be opened in a new tab: &nbsp;
  <a href="https://freecodetools.org/">
    Free Code Tools
  </a>

  <p>
    Read more: <br><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
    MDN Documentation
    </a>
  </p>
</div>
/* Please ❤ this if you like it! */

.wrapper {
  text-align: center;
  padding: 0 15px;
  background-color: #173446;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-size: 1.4em;
}

a {
  color: #999;
  position: relative;
}

a:after {
  background-color: #999;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transition: all .3s ease-in-out 0s;
  visibility: hidden;
  width: 100%;
}

a:hover:after {
  transform: scaleX(1);
  visibility: visible;
}

相关文章

  • 鼠标经过底部下划线从中间放大的动画

    资料 参考代码:Base Element[https://codepen.io/denic/pen/yLYYwJp...

  • 好玩的CSS动效~

    Loading动画-01 Loading动画-02 蚀刻文本 渐变字 悬停下划线动画 鼠标光标梯度跟踪 溢出滚动渐...

  • 自定义View-31 直播点赞效果

    1. 效果 2. 分析 2.1 在界面底部中间出现爱心图片 2.1.1 放大和透明度变化的动画 2.2 沿 s 型...

  • 动画效果

    1.图片鼠标悬停 缓慢放大 阴影(不受限于外部容器) 2.图片鼠标悬停 缓慢放大(受限于外部容器) 更多动画:ht...

  • BottomNavigationView 控件去除放大缩小动画

    BottomNavigationView 控件去除放大缩小动画 最近项目中有用到底部导航栏,最初的底部导航栏是使用...

  • css3-鼠标经过动画

    css html

  • Animate实现鼠标经过动画效果

    动画效果可以参照animate.css 注:图片默认是不动的,当鼠标经过的时候才会动。原理很简单--通过js,添加...

  • PS简单操作

    标尺 command + r放大镜: Z 鼠标是放大镜的情况下 鼠标左键放大, alt + 鼠标左键 缩小。修...

  • C4D笔记

    鼠标滚轮中间,窗口切换,将一个屏幕切成四个视图。 鼠标滚轮选中要放大的视图。 CTRL +TAB全屏 双击创建材质...

  • 家用电器分类

    要求 (1) .电器分类无下划线,鼠标悬浮超链接时显示下划线。(2) .分类内容超链无下划线,鼠标悬浮至超链接时字...

网友评论

      本文标题:鼠标经过底部下划线从中间放大的动画

      本文链接:https://www.haomeiwen.com/subject/qhqyyltx.html