100 种下划线 / 覆盖层动画 | 终极 CSS（层叠样式表）集合

丷丩

已于 2024-10-15 16:19:08 修改

阅读量626

点赞数 10

分类专栏：通用文章标签： css 前端特效动画

于 2024-10-15 14:56:06 首次发布

本文链接：https://blog.youkuaiyun.com/eqmaster/article/details/142935910

版权

在这里插入图片描述

还在为你的菜单项和链接寻找动画效果而感到疲惫吗？

不用再找了！这里列出了 100 多种不同的动画。从简单的到更复杂的，你肯定能找到自己想要的。

无需 SVG（可缩放矢量图形），无需 JavaScript（脚本语言），无需额外标签，无需伪元素，无需关键帧……所有这些动画都是利用背景、过渡效果并且只通过一个元素来实现的。只需添加一个类，就可以享受（这些动画效果）了。

不依赖伪元素，所以你可以轻松地将它们用于诸如输入框（我们无法在其中使用伪元素）之类的元素上。

关键字：css 特效动画样式纯 css

主要效果

1. 基础效果

2. 持续效果

3. 双重效果

4. 分阶段动画

5. 突现效果

6. 圆弧效果

7. 消融效果

8. 无限效果

9. 全方位效果

10. 厚重

11. 滑动

12. 华丽

13. 倒转

14. 三维

一、基础用法

这部分主要介绍了一些基础的动画效果实现方式。通过对一系列类名为basic - *的元素设置不同的背景渐变样式，并利用 CSS 变量和过渡效果，实现了在鼠标悬停时下划线样式的变化。这些效果从简单的单边下划线到复杂的位置变化下划线都有涵盖，为后续更复杂的动画效果奠定了基础。

<div class="basic-0">0. Hover me</div>
<div class="basic-1">1. Hover me</div>
<div class="basic-2">2. Hover me</div>
<div class="basic-3">3. Hover me</div>
<div class="basic-4">4. Hover me</div>
<div class="basic-5">5. Hover me</div>
<div class="basic-6">6. Hover me</div>

.basic-0 {
   
  background: linear-gradient(currentColor 0 0) 0 100% / var(--d, 0) 3px
    no-repeat;
}
.basic-0:hover {
   
  --d: 100%;
}

.basic-1 {
   
  background: linear-gradient(currentColor 0 0) 0 100% / var(--d, 0) 3px
    no-repeat;
  transition: 0.5s;
}
.basic-1:hover {
   
  --d: 100%;
}

.basic-2 {
   
  background: linear-gradient(currentColor 0 0) 100% 100% / var(--d, 0) 3px
    no-repeat;
  transition: 0.5s;
}
.basic-2:hover {
   
  --d: 100%;
}

.basic-3 {
   
  background: linear-gradient(currentColor 0 0) bottom / var(--d, 0) 3px
    no-repeat;
  transition: 0.5s;
}
.basic-3:hover {
   
  --d: 100%;
}

.basic-4 {
   
  background: linear-gradient(currentColor 0 0) var(--p, 0) 100% / var(--d, 0) 3px
    no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
.basic-4:hover {
   
  --d: 100%;
  --p: 100%;
}

.basic-5 {
   
  background: linear-gradient(currentColor 0 0) var(--p, 100%) 100% / var(
      --d,
      0
    ) 3px no-repeat;
  transition: 0.3s, background-position 0s 0.3s;
}
.basic-5:hover {
   
  --d: 100%;
  --p: 0%;
}

.basic-6 {
   
  background: linear-gradient(currentColor 0 0) bottom / var(--d, 20%) 3px
    no-repeat;
  transition: 0.5s;
}
.basic-6:hover {
   
  --d: 80%;
}

/**/
div[class] {
   
  display: inline-block;
  font-size: 40px;
  font-family: sans-serif;
  margin: 25px;
  padding-bottom: 5px;
  cursor: pointer;
}
div[class]:nth-child(odd) {
   
  color: darkblue;
}
body {
   
  text-align: center;
}

查看效果

二、边框效果

此部分着重展示了围绕元素四周的边框动画效果。通过设置多个线性渐变背景，并结合 CSS 变量和过渡效果，在鼠标悬停时使边框从无到有或发生其他样式变化。这些效果可以用于强调元素的边界，为页面元素添加独特的视觉效果，提升用户对元素的关注度。

html:

<div class="allsides-1">1. Hover me </div>
<div class="allsides-2">2. Hover me </div>
<div class="allsides-3">3. Hover me </div>
<div class="allsides-4">4. Hover me </div>
<div class="allsides-5">5. Hover me </div>
<div class="allsides-6">6. Hover me </div>
<div class="allsides-7">7. Hover me </div>
<div class="allsides-8">8. Hover me </div>

css:

.allsides-1 {
   
  background: linear-gradient(currentColor 0 0) 100% 0, linear-gradient(
        currentColor 0 0
      ) 0 0, linear-gradient(currentColor 0 0) 0 100%, linear-gradient(
        currentColor 0 0
      ) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-1:hover {
   
  --d: 100%;
}

.allsides-2 {
   
  background: linear-gradient(currentColor 0 0) 0 0, linear-gradient(
        currentColor 0 0
      ) 0 0, linear-gradient(currentColor 0 0) 100% 100%, linear-gradient(
        currentColor 0 0
      ) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-2:hover {
   
  --d: 100%;
}

.allsides-3 {
   
  background: linear-gradient(currentColor 0 0) top, linear-gradient(
        currentColor 0 0
      ) left, linear-gradient(currentColor 0 0) bottom, linear-gradient(
        currentColor 0 0
      ) right;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-3:hover {
   
  --d: 100%;
}

.allsides-4 {
   
  background: linear-gradient(currentColor 0 0) var(--p, 100%) 0, linear-gradient(
        currentColor 0 0
      ) 0 var(--d, 0), linear-gradient(currentColor 0 0) var(--d, 0) 100%, linear-gradient(
        currentColor 0 0
      ) 100% var(--p, 100%);
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}

.allsides-4:hover {
   
  --d: 100%;
  --p: 0%;
}

.allsides-5 {
   
  background: linear-gradient(currentColor 0 0) var(--d, 0) 0, linear-gradient(
        currentColor 0 0
      ) 0 var(--d, 0), linear-gradient(currentColor 0 0) var(--p, 100%) 100%, linear-gradient(
        currentColor 0 0
      ) 100% var(--p, 100%);
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}

.allsides-5:hover {
   
  --d: 100%;
  --p: 0%;
}

.allsides-6 {
   
  background: linear-gradient(currentColor 0 0) 0 0, linear-gradient(
        currentColor 0 0
      ) 0 0, linear-gradient(currentColor 0 0) 0 100%, linear-gradient(
        currentColor 0 0
      ) 0 100%, linear-gradient(currentColor 0 0) 100% 0, linear-gradient(
        currentColor 0 0
      ) 100% 0, linear-gradient(currentColor 0 0) 100% 100%, linear-gradient(
        currentColor 0 0
      ) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-6:hover {
   
  --d: 20px;
}

.allsides-7 {
   
  background: linear-gradient(currentColor 0 0) 0 100%, linear-gradient(
        currentColor 0 0
      ) 0 100%, linear-gradient(currentColor 0 0) 100% 100%, linear-gradient(
        currentColor 0 0
      ) 100% 100%;
  background-size: var(--p, 50%) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-7:hover {
   
  --d: 100%;
  --p: 0%;
}

.allsides-8 {
   
  background: linear-gradient(currentColor 0 0) 0 100%, linear-gradient(
        currentColor 0 0
      ) 0 100%, linear-gradient(currentColor 0 0) 100% 0, linear-gradient(
        currentColor 0 0
      ) 100% 0;
  background-size: 20px 3px, 3px 20px;
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-8:hover {
   
  background-position: 100% 100%, 0 0, 0 0, 100% 100%;
}

/**/
div[class] {
   
  display: inline-block;
  font-size: 40px;
  font-family: sans-serif;
  margin: 25px;
  padding: 8px;
  cursor: pointer;
}

div[class]:nth-child(odd) {
   
  color: darkblue;
}

body {
   
  text-align: center;
}

查看效果

三、持续效果

这部分的动画效果强调了一种持续性的视觉变化。在鼠标悬停相关元素时，通过背景渐变和 CSS 变量的控制，实现了元素边框或下划线等样式的持续改变，给用户一种连贯、流畅的视觉感受，可用于创建具有动态感和交互性的页面元素。

查看效果

html:

<div class="allsides-1">1. Hover me </div>
<div class="allsides-2">2. Hover me </div>
<div class="allsides-3">3. Hover me </div>
<div class="allsides-4">4. Hover me </div>
<div class="allsides-5">5. Hover me </div>
<div class="allsides-6">6. Hover me </div>
<div class="allsides-7">7. Hover me </div>
<div class="allsides-8">8. Hover me </div>

css:

.allsides-1 {
   
  background: linear-gradient(currentColor 0 0) 100% 0, linear-gradient(
        currentColor 0 0
      ) 0 0, linear-gradient(currentColor 0 0) 0 100%, linear-gradient(
        currentColor 0 0
      ) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-1:hover {
   
  --d: 100%;
}

.allsides-2 {
   
  background: linear-gradient(currentColor 0 0) 0 0, linear-gradient(
        currentColor 0 0
      ) 0 0, linear-gradient(currentColor 0 0) 100% 100%, linear-gradient(
        currentColor 0 0
      ) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-2:hover {
   
  --d: 100%;
}

.allsides-3 {
   
  background: linear-gradient(currentColor 0 0) top, linear-gradient(
        currentColor 0 0
      ) left, linear-gradient(currentColor 0 0) bottom, linear-gradient(
        currentColor 0 0
      ) right;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-3:hover {
   
  --d: 100%;
}

.allsides-4 {
   
  background: linear-gradient(currentColor 0 0) var(--p, 100%) 0, linear-gradient(
        currentColor 0 0
      ) 0 var(--d, 0), linear-gradient(currentColor 0 0) var(--d, 0) 100%, linear-gradient(
        currentColor 0 0
      ) 100% var(--p, 100%);
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}

.allsides-4:hover {
   
  --d: 100%;
  --p: 0%;
}

.allsides-5 {
   
  background: linear-gradient(currentColor 0 0) var(--d, 0) 0, linear-gradient(
        currentColor 0 0
      ) 0 var(--d, 0), linear-gradient(currentColor 0 0) var(--p, 100%) 100%, linear-gradient(
        currentColor 0 0
      ) 100% var(--p, 100%);
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s, background-position 0s 0.5s;
}

.allsides-5:hover {
   
  --d: 100%;
  --p: 0%;
}

.allsides-6 {
   
  background: linear-gradient(currentColor 0 0) 0 0, linear-gradient(
        currentColor 0 0
      ) 0 0, linear-gradient(currentColor 0 0) 0 100%, linear-gradient(
        currentColor 0 0
      ) 0 100%, linear-gradient(currentColor 0 0) 100% 0, linear-gradient(
        currentColor 0 0
      ) 100% 0, linear-gradient(currentColor 0 0) 100% 100%, linear-gradient(
        currentColor 0 0
      ) 100% 100%;
  background-size: var(--d, 0) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-6:hover {
   
  --d: 20px;
}

.allsides-7 {
   
  background: linear-gradient(currentColor 0 0) 0 100%, linear-gradient(
        currentColor 0 0
      ) 0 100%, linear-gradient(currentColor 0 0) 100% 100%, linear-gradient(
        currentColor 0 0
      ) 100% 100%;
  background-size: var(--p, 50%) 3px, 3px var(--d, 0);
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-7:hover {
   
  --d: 100%;
  --p: 0%;
}

.allsides-8 {
   
  background: linear-gradient(currentColor 0 0) 0 100%, linear-gradient(
        currentColor 0 0
      ) 0 100%, linear-gradient(currentColor 0 0) 100% 0, linear-gradient(
        currentColor 0 0
      ) 100% 0;
  background-size: 20px 3px, 3px 20px;
  background-repeat: no-repeat;
  transition: 0.5s;
}

.allsides-8:hover {
   
  background-position: 100% 100%, 0 0, 0 0, 100% 100%