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

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

核心属性

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;
```
```
}
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

用户体验的要素

Jesse James Garrett / 范晓燕 / 机械工业出版社 / 2007年10月 / 25.00

这不是一本关于“怎样做（How-to）”的书。有很多很多讨论如何建设网站的书，这本不是。这不是一本关于技术的书。在这里你找不到一行代码。这不是一本有答案的书。相反，这本书说的是“如何提出正确的问题”。这本书将告诉你，在你阅读其他书籍的之前，你需要提前了解什么。如果你需要一个大的概念，如果你需要了解用户体验设计师所做出的决策的环境，这本书很适合你。这本书经过精心设计，......一起来看看《用户体验的要素》这本书的介绍吧!

码农工具

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

核心属性

用户体验的要素

CSS 压缩/解压工具

html转js在线工具

UNIX 时间戳转换