文字悬停下划线动画效果集合

栏目: Html · 发布时间: 4年前

核心属性

box-sizing: border-box 使所有元素的尺寸计算变为传统模型

line-height: 200px 设置元素的高度为200px，并且文字垂直居中显示

text-decoration: none 去除a标签默认的下划线

:before + :hover/:focus + visibility + transform 自定义下划线的悬停动画效果

box-shadow 发光的下划线

:hover/:focus + animation + height + transform + opacity 悬停下划线变背景的动画效果

```
<div class="container">
```
```
<h2>
```
```
<a href=''>把鼠标放到这里</a>
```
```
</h2>
```
```
<h2 class='uno'>
```
```
<a href=''>再放一下</a>
```
```
</h2>
```
```
<h2 class='dos bis'>
```
```
<a href=''>发光的下划线I</a>
```
```
</h2>
```
```
<h2 class='dos'>
```
```
<a href=''>发光的下划线II</a>
```
```
</h2>
```
```
<h3 class='tres'>
```
```
<a href=''>悬停的动画效果</a>
```
```
</h3>
```
```
</div>
```

```
*, *:after, *:before {
```
```
box-sizing: border-box;
```
```
}
```
```
* {
```
```
margin: 0;
```
```
padding: 0;
```
```
border: 0 none;
```
```
position: relative;
```
```
outline: none;
```
```
}
```
```
html, body {
```
```
background: #004050;
```
```
font-weight: 300;
```
```
width: 100%;
```
```
}
```
```
h2, h3 {
```
```
background: #0D757D;
```
```
width: 100%;
```
```
min-height: 200px;
```
```
line-height: 200px;
```
```
font-size: 3rem;
```
```
font-weight: normal;
```
```
text-align: center;
```
```
color: rgba(0,0,0,.4);
```
```
margin: 3rem auto 0;
```
```
}
```
```
.uno {
```
```
background: #ff5e33;
```
```
}
```
```
.dos.bis {
```
```
background: #85144B;
```
```
}
```
```
.dos {
```
```
background: #FADD40;
```
```
}
```
```
h3 {
```
```
background: #2B5B89;
```
```
}
```
```
h2 > a, h3 > a {
```
```
text-decoration: none;
```
```
color: rgba(0,0,0,.4);
```
```
z-index: 1;
```
```
}
```
```
h2 > a:before {
```
```
content: "";
```
```
position: absolute;
```
```
width: 100%;
```
```
height: 3px;
```
```
bottom: 0;
```
```
left: 0;
```
```
background: #9CF5A6;
```
```
visibility: hidden;
```
```
border-radius: 5px;
```
```
transform: scaleX(0);
```
```
transition: .25s linear;
```
```
}
```
```
h2 > a:hover:before,
```
```
h2 > a:focus:before {
```
```
visibility: visible;
```
```
transform: scaleX(1);
```
```
}
```
```
.uno a:before {
```
```
background: rgba(0,0,0,0);
```
```
box-shadow: 0 0 10px 2px #ffdb00;
```
```
}
```
```
.dos > a:after {
```
```
content: "";
```
```
position: absolute;
```
```
width: 100%;
```
```
height: 7px;
```
```
border: 1px solid #000;
```
```
bottom: -2px;
```
```
left: 0;
```
```
background: #fff;
```
```
border-radius: 5px;
```
```
opacity: 0;
```
```
transform: scalex(0);
```
```
transition: .5s;
```
```
}
```
```
.dos.bis > a:after {
```
```
opacity: .05;
```
```
transform: scalex(1);
```
```
}
```
```
.dos:hover > a:after {
```
```
opacity: .15;
```
```
transform: scalex(1);
```
```
}
```
```
.dos.bis > a:before {
```
```
background: rgba(0,0,0,0);
```
```
box-shadow: 0 0 10px 2px #FADD40;
```
```
}
```
```
.dos > a:before {
```
```
background: rgba(0,0,0,0);
```
```
box-shadow: 0 0 10px 2px #FF5E33;
```
```
}
```
```
h3 > a:before {
```
```
content: "";
```
```
background: #7FDBFF;
```
```
position: absolute;
```
```
width: 100%;
```
```
height: 5px;
```
```
bottom: 0;
```
```
left: 0;
```
```
border-radius: 5px;
```
```
transform: scaleX(0);
```

animation: 1.4s forwards no-hover-v linear;

```
animation-fill-mode: forwards;
```
```
z-index: -1;
```
```
}
```
```
h3 > a:hover:before,
```
```
h3 > a:focus:before {
```
```
animation: .5s forwards hover-v linear;
```
```
animation-fill-mode: forwards;
```
```
}
```
```
@keyframes hover-v {
```
```
0% {
```
```
transform: scaleX(0);
```
```
height: 5px;
```
```
}
```
```
45% {
```
```
transform: scaleX(1.05);
```
```
height: 5px;
```
```
}
```
```
55% { height: 5px; }
```
```
100% {
```
```
transform: scaleX(1.05);
```
```
height: 3.8rem;
```
```
}
```
```
}
```
```
@keyframes no-hover-v {
```
```
0% {
```
```
transform: scaleX(1.05);
```
```
height: 3.8rem;
```
```
}
```
```
45% { height: 5px; }
```
```
55% {
```
```
transform: scaleX(1.05);
```
```
height: 5px;
```
```
opacity: 1;
```
```
}
```
```
100% {
```
```
transform: scaleX(0);
```
```
height: 5px;
```
```
opacity: .02;
```
```
}
```
```
}
```

以上所述就是小编给大家介绍的《文字悬停下划线动画效果集合》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

JSP网站开发典型模块与实例精讲

李振捷 / 电子工业出版社 / 2006-8 / 50.0

本书是典型模块与实例精讲丛书中的一本。本书讲解了使用JSP开发网站系统的经典模块和工程实例，基本囊括了JSP的重点技术，对这些模块稍加修改就可以直接使用到实际项目中。为了方便本书的读者交流在学习中遇到的问题，特地在本书的服务网站上公布了很多QQ群组，读者只要拥有QQ号码，就可以参与到本书的QQ学习群组中一起讨论学习心得。本书的作者还在一定的时间给读者提供在线答疑服务。一起来看看《JSP网站开发典型模块与实例精讲》这本书的介绍吧!

码农工具

文字悬停下划线动画效果集合

核心属性

JSP网站开发典型模块与实例精讲

URL 编码/解码

SHA 加密

RGB CMYK 转换工具