还在为你的菜单项和链接寻找动画效果而感到疲惫吗？
不用再找了！这里列出了 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) 3pxno-repeat;
}
.basic-0:hover {--d: 100%;
}.basic-1 {background: linear-gradient(currentColor 0 0) 0 100% / var(--d, 0) 3pxno-repeat;transition: 0.5s;
}
.basic-1:hover {--d: 100%;
}.basic-2 {background: linear-gradient(currentColor 0 0) 100% 100% / var(--d, 0) 3pxno-repeat;transition: 0.5s;
}
.basic-2:hover {--d: 100%;
}.basic-3 {background: linear-gradient(currentColor 0 0) bottom / var(--d, 0) 3pxno-repeat;transition: 0.5s;
}
.basic-3:hover {--d: 100%;
}.basic-4 {background: linear-gradient(currentColor 0 0) var(--p, 0) 100% / var(--d, 0) 3pxno-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%) 3pxno-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%;
}/**/
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;
}
四、分段效果
主要介绍了分阶段的动画效果。通过设置不同的背景渐变组合以及复杂的过渡效果，在鼠标悬停时，元素的样式会按照设定的阶段逐步发生变化。这种效果可以为用户提供更丰富的交互体验，使元素的动态效果更具层次感和逻辑性。
查看效果
html:
<div class="two-steps-1">1. Hover me </div>
<div class="two-steps-2">2. Hover me </div>
<div class="two-steps-3">3. Hover me </div>
<div class="two-steps-4">4. Hover me </div>
<div class="two-steps-5">5. Hover me </div>
<div class="two-steps-6">6. Hover me </div>
<div class="two-steps-7">7. Hover me </div>
css:
.two-steps-1 {background: linear-gradient(currentColor 0 0) var(--p, -100%) 100% /50% 3pxno-repeat, linear-gradient(currentColor 0 0) 0 100% / var(--d, 0) 3pxno-repeat;transition: 0.3s, background-position 0.3s 0.2s;
}
.two-steps-1:hover {--d: 100%;--p: 0%;transition: 0.3s, background-size 0.3s 0.2s;
}.two-steps-2 {background: linear-gradient(currentColor 0 0) var(--p, 200%) 100% /50% 3pxno-repeat, linear-gradient(currentColor 0 0) 100% 100% / var(--d, 0) 3pxno-repeat;transition: 0.3s, background-position 0.3s 0.2s;
}
.two-steps-2:hover {--d: 100%;--p: 100%;transition: 0.3s, background-size 0.3s 0.2s;
}.two-steps-3 {background: linear-gradient(currentColor 0 0) var(--p, 201%) 100% /50% 3pxno-repeat, linear-gradient(90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-3:hover {--d: 100%;--p: 100%;transition: 0.3s, background-position 0.3s 0.2s;
}.two-steps-4 {background: linear-gradient(currentColor 0 0) var(--p, -100%) 100% /50% 3pxno-repeat, linear-gradient(-90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-4:hover {--d: 100%;--p: 0%;transition: 0.3s, background-position 0.3s 0.2s;
}.two-steps-5 {background: linear-gradient(currentColor 0 0) var(--p, 201%) 100% /50% 3pxno-repeat, linear-gradient(-90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-5:hover {--d: 100%;--p: 0%;transition: 0.3s, background-position 0.3s 0.2s;
}.two-steps-6 {background: linear-gradient(currentColor 0 0) var(--p, -101%) 100% /50% 3pxno-repeat, linear-gradient(90deg, currentColor 50%, transparent 0) bottom /var(--d, 0) 3px no-repeat;transition: 0.3s, background-size 0.3s 0.3s;
}
.two-steps-6:hover {--d: 100%;--p: 100%;transition: 0.3s, background-position 0.3s 0.3s;
}.two-steps-7 {background: linear-gradient(currentColor 0 0) 100% 100% / var(--p, 0%) 3pxno-repeat, linear-gradient(currentColor 0 0) var(--d, -101%) 100% /50% 3pxno-repeat;transition: 0.3s, background-size 0.3s 0.2s;
}
.two-steps-7:hover {--d: 0%;--p: 50%;transition: 0.3s, background-position 0.3s 0.2s;
}/**/
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="unexpected-1">1. Hover me </div>
<div class="unexpected-2">2. Hover me </div>
<div class="unexpected-3">3. Hover me </div>
<div class="unexpected-4">4. Hover me </div>
<div class="unexpected-5">5. Hover me </div>
<div class="unexpected-6">6. Hover me </div>
<div class="unexpected-7">7. Hover me </div>
<div class="unexpected-8">8. Hover me </div>
css:
.unexpected-1 {background: linear-gradient(currentColor 0 0) var(--p, 50%) 100% / var(--d,10%) 3px no-repeat;transition: 0.3s, background-position 0.3s 0.3s;
}.unexpected-1:hover {--d: 100%;--p: 0%;transition: 0.3s, background-size 0.3s 0.3s;
}.unexpected-3 {background: linear-gradient(currentColor 0 0) left var(--p, 50%) bottom 0 /var(--d, 10%) 3px no-repeat, linear-gradient(currentColor 0 0) right var(--p,50%)bottom 0 / var(--d, 10%) 3px no-repeat;transition: 0.3s, background-position 0.3s 0.3s;
}.unexpected-3:hover {--d: 100%;--p: 100%;transition: 0.3s, background-size 0.3s 0.3s;
}.unexpected-2 {background: linear-gradient(currentColor 0 0) left var(--p, 50%) bottom 0 /var(--d, 10%) 3px no-repeat, linear-gradient(currentColor 0 0) right var(--p,50%)bottom 0 / var(--d, 10%) 3px no-repeat;transition: 0.3s, background-position 0.3s 0.3s;
}.unexpected-2:hover {--d: 50%;--p: 50.1%;transition: cubic-bezier(0, 500, 1, 500) 0.3s, background-size 0.3s 0.3s;
}.unexpected-4 {background: linear-gradient(currentColor 0 0) var(--p, 50%) 100% / var(--d,10%) 3px no-repeat;transition: 0.3s, background-position 0s;
}.unexpected-4:hover {--d: 100%;--p: 0%;transition: 0.3s, background-size 0.3s 0.3s;
}.unexpected-5 {background: linear-gradient(currentColor 0 0) calc(50% + 10px) 100% /20px 3pxno-repeat, linear-gradient(90deg,transparent calc(100% - 20px),currentColor 0) 0 100% / var(--d, 50%) 3px no-repeat;transition: 0.3s;
}.unexpected-5:hover {--d: 0%;background-position: calc(50% + 0px) 100%, 0 100%;transition: 0.3s cubic-bezier(0, -5, 1, -5), background-size 0.3s 0.3s;
}.unexpected-6 {background: linear-gradient(currentColor 0 0) left var(--p, 50%) bottom 0 /var(--d, 20px) 3px no-repeat, linear-gradient(currentColor 0 0) right var(--p,50%)bottom 0 / var(--d, 20px) 3px no-repeat;transition: 0.3s, background-position 0s;
}.unexpected-6:hover {--d: 100%;--p: 100%;transition: 0.3s, background-size 0.3s 0.3s;
}.unexpected-7 {background: linear-gradient(currentColor 0 0) -20% 100% / var(--p, 10%) 3px no-repeat;transition: 0.5s 0.3s cubic-bezier(0, 1.25, 1, 1.8), background-size 0.3s;
}.unexpected-7:hover {background-position: 50% 100%;--p: 50%;transition: 0.5s cubic-bezier(0, 1.25, 1, 1.8), background-size 0.2s 0.7s;
}.unexpected-8 {background: linear-gradient(currentColor 0 0) bottom/var(--p, 10%) 3pxno-repeat;transition: 0s;
}.unexpected-8:hover {--p: 10.1%;transition: 0.5s cubic-bezier(0, 800, 1, 800);
}/**/
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="rounded-1">1. Hover me </div>
<div class="rounded-2">2. Hover me </div>
<div class="rounded-3">3. Hover me </div>
<div class="rounded-4">4. Hover me </div>
<div class="rounded-5">5. Hover me </div>
<div class="rounded-6">6. Hover me </div>
<div class="rounded-7">7. Hover me </div>
<div class="rounded-8">8. Hover me </div>
css:
.rounded-1 {background: radial-gradient(circle closest-side,currentColor 90%,transparent) bottom / var(--d, 80%) 12px repeat-x;transition: 0.5s;
}
.rounded-1:hover {--d: 12px;
}.rounded-2 {background: radial-gradient(circle closest-side,currentColor 90%,transparent) bottom / var(--d, 3px) 12px repeat-x;transition: 0.5s;
}
.rounded-2:hover {--d: 12px;
}.rounded-3 {background: radial-gradient(circle 7px, currentColor 90%, transparent) bottom var(--d,-14px)left 50%/12px 14px repeat-x;transition: 0.5s;
}
.rounded-3:hover {--d: -7px;
}.rounded-4 {background: radial-gradient(circle closest-side,currentColor 80%,transparent) bottom var(--p1, 0px) left 50% /100% var(--p, 12px) no-repeat, linear-gradient(currentColor 0 0) bottom 4px left 50% / var(--d, 0%) 3px no-repeat;transition: 0.5s;
}
.rounded-4:hover {--d: 100%;--p: 3px;--p1: 4px;
}.rounded-5 {padding-bottom: 8px;background: radial-gradient(circle closest-side,currentColor 80%,transparent) bottom 0 left calc(50% - var(--d, 0px) / 2) / 100% 12px no-repeat, radial-gradient(circle closest-side,currentColor 80%,transparent) bottom 0 left calc(50% + var(--d, 0px) / 2) / 100% 12px no-repeat,linear-gradient(currentColor 0 0) bottom / var(--d, 0%) 12px no-repeat;transition: 0.5s;
}
.rounded-5:hover {--d: 50px;
}.rounded-6 {padding-bottom: 8px;background: radial-gradient(circle closest-side,currentColor 80%,transparent) bottom / 12px 12px no-repeat, radial-gradient(circle closest-side,currentColor 80%,transparent) bottom / 12px 12px no-repeat,linear-gradient(currentColor 0 0) bottom left / var(--d, 0%) 12px no-repeat,linear-gradient(currentColor 0 0) bottom right/var(--d, 0%) 12px no-repeat;transition: 0.3s, background-position 0.3s 0.3s;
}
.rounded-6:hover {--d: 100%;background-position: bottom left, bottom right;transition: 0.3s, background-size 0.3s 0.3s;
}.rounded-7 {padding-bottom: 8px;background: radial-gradient(circle closest-side,currentColor 80%,transparent) -12px 100% /12px 12px no-repeat, linear-gradient(currentColor 0 0) bottomleft / var(--d, 0) 12px no-repeat;transition: 0.3s linear;
}
.rounded-7:hover {--d: 50%;background-position: 50% 100%, bottom left;
}.rounded-8 {background: radial-gradient(circle closest-side,currentColor 80%,transparent) var(--d, 50%) 100% /12px 12px no-repeat;
}.rounded-8:hover {--d: 50.1%;transition: 0.3s cubic-bezier(0.5, -900, 0.5, 900);
}/**/
div[class] {display: inline-block;font-size: 40px;font-family: sans-serif;margin: 25px;padding-bottom: 10px;cursor: pointer;
}
div[class]:nth-child(odd) {color: darkblue;
}
body {text-align: center;
}
七、消融效果
此部分介绍的是消融类的动画效果。通过设置不同类型的线性和径向渐变背景，结合过渡效果，在鼠标悬停时，元素的下划线或背景装饰呈现出逐渐消失或融合的效果。这种效果可以传达一种动态的、变化的视觉感受，常用于一些需要表现元素的动态性或临时性的场景。
查看效果
html:
<div class="fading-1">1. Hover me </div>
<div class="fading-2">2. Hover me </div>
<div class="fading-3">3. Hover me </div>
<div class="fading-4">4. Hover me </div>
<div class="fading-5">5. Hover me </div>
<div class="fading-6">6. Hover me </div>
<div class="fading-7">7. Hover me </div>
css:
.fading-1 {background: linear-gradient(90deg, transparent, black, transparent) bottom / var(--d,0)3px no-repeat;transition: 0.5s;
}
.fading-1:hover {--d: 100%;
}.fading-2 {background: linear-gradient(transparent, black) bottom / 100% var(--d, 0)no-repeat;transition: 0.5s;
}
.fading-2:hover {--d: 12px;
}.fading-3 {background: linear-gradient(-45deg,transparent calc(100% / 3),rgba(0, 0, 0, 0.5),transparent calc(200% / 3)) bottom right/350% 100% no-repeat;transition: 0.5s linear;
}
.fading-3:hover {background-position: bottom left;
}.fading-4 {background: radial-gradient(transparent 50%, rgba(0, 0, 0, 0.5)) center/200% 200%no-repeat;transition: 0.5s;
}
.fading-4:hover {background-size: 100% 100%;
}.fading-5 {background: linear-gradient(-45deg,transparent calc(100% / 3),rgba(0, 0, 0, 0.5),transparent calc(200% / 3)) bottom right/350% 100% no-repeat;transition: 0.5s linear, background-size 0s 0.5s;
}
.fading-5:hover {background-position: bottom left;background-size: 0 0;
}.fading-6 {background: linear-gradient(90deg,rgba(0, 0, 0, 0.5),transparent 30% 70%,rgba(0, 0, 0, 0.5)) center/300% 100% no-repeat;transition: 0.5s;
}
.fading-6:hover {background-size: 100% 100%;
}.fading-7 {background: radial-gradient(farthest-side at bottom, black, transparent) bottom/calc(2 * var(--d, 0%))var(--d, 0) no-repeat;transition: 0.5s;
}
.fading-7:hover {--d: 50%;
}/**/
div[class] {display: inline-block;font-size: 40px;font-family: sans-serif;margin: 25px;padding: 8px;cursor: pointer;
}
body {text-align: center;
}
八、无限效果
这部分着重展示了具有无限循环特点的动画效果。通过设置重复的线性渐变背景，并利用极长的过渡时间和特定的位置变化设置，在鼠标悬停时，元素的下划线或背景装饰呈现出无限循环移动的视觉效果。这种效果可以为页面增添一种动态的、持续的活力感，适用于一些需要强调连续性或重复性的设计场景。
查看效果
html:
<div class="infinite-1">1. Hover me </div><div class="infinite-2">2. Hover me </div><div class="infinite-3">3. Hover me </div><div class="infinite-4">4. Hover me </div><div class="infinite-5">5. Hover me </div><div class="infinite-6">6. Hover me </div><div class="infinite-7">7. Hover me </div><div class="infinite-8">8. Hover me </div>
css:
.infinite-1 {background: repeating-linear-gradient(90deg,currentColor 0 15px,transparent 0 30px) bottom left / 2000% 3px no-repeat;transition: 99999s linear;
}.infinite-1:hover {background-position: bottom right;transition: 40s linear;
}.infinite-2 {background: repeating-linear-gradient(90deg,currentColor 0 15px,transparent 0 30px) bottom right / 2000% 3px no-repeat;transition: 99999s linear;
}.infinite-2:hover {background-position: bottom left;transition: 40s linear;
}.infinite-3 {background: repeating-linear-gradient(90deg,currentColor 0 15px,transparent 0 30px), repeating-linear-gradient(90deg, currentColor 0 15px, transparent 0 30px);background-position: center bottom;background-size: 2000% 3px;background-repeat: no-repeat;transition: 99999s linear;
}.infinite-3:hover {background-position: bottom left, bottom right;transition: 40s linear;
}.infinite-4 {background: linear-gradient(90deg, currentColor 50%, transparent 0) 0 100%/200%3px repeat-x;transition: 99999s linear;
}.infinite-4:hover {background-position: -8000px 100%;transition: 30s;
}.infinite-5 {background: linear-gradient(90deg, currentColor 50%, transparent 0) 0 100%/200%3px repeat-x;transition: 99999s linear;
}.infinite-5:hover {background-position: 8000px 100%;transition: 30s;
}.infinite-6 {background: linear-gradient(90deg,currentColor 30px,transparent 0 calc(100% - 30px),currentColor 0), linear-gradient(90deg, currentColor 30px, transparent 0 calc(100% - 30px), currentColor0);background-size: 200% 3px;background-position: 0 100%, 0px 100%;background-repeat: repeat-x;transition: 99999s linear;
}.infinite-6:hover {background-position: 10000px 100%, -10000px 100%;transition: 30s linear;
}.infinite-7 {background: linear-gradient(90deg,currentColor 15px,transparent 0 calc(100% - 15px),currentColor 0), linear-gradient(90deg, currentColor 15px, transparent 0 calc(100% - 15px), currentColor0);background-size: 100% 3px;background-position: 0 100%, 0px 100%;background-repeat: repeat-x;transition: 99999s linear;
}.infinite-7:hover {background-position: 10000px 100%, -10000px 100%;transition: 30s linear;
}.infinite-8 {background: linear-gradient(90deg,transparent calc(25% - 15px),currentColor 0 calc(25% + 15px),transparent 0) 0 100%/200% 3px repeat-x;transition: 99999s linear;
}.infinite-8:hover {background-position: 10000px 100%, -10000px 100%;transition: 30s linear;
}/**/
div[class] {display: inline-block;font-size: 40px;font-family: sans-serif;margin: 25px;padding-bottom: 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%;
}/**/
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;
}
十、厚重
这部分介绍的是厚重感的动画效果。通过设置不同的线性渐变背景和过渡效果，在鼠标悬停时，元素的下划线或背景装饰呈现出一种厚重、实在的视觉效果。这种效果可以为页面元素增添一种沉稳、可靠的感觉，适用于一些需要传达专业或重要信息的页面设计。
查看效果
html:
<div class="thick-1">1. Hover me </div>
<div class="thick-2">2. Hover me </div>
<div class="thick-3">3. Hover me </div>
<div class="thick-4">4. Hover me </div>
<div class="thick-5">5. Hover me </div>
<div class="thick-6">6. Hover me </div>
<div class="thick-7">7. Hover me </div>
<div class="thick-8">8. Hover me </div>
css:
.thick-1 {background: linear-gradient(currentColor 0 0) bottom / 100% var(--d, 0px)no-repeat;transition: 0.5s;
}.thick-1:hover {--d: 10px;
}.thick-2 {background: linear-gradient(#000 0 0) 50% calc(-3px - 100%) / var(--d, 0%)200% no-repeat;transition: 0.3s, background-size 0.3s 0.3s;
}
.thick-2:hover {--d: 100%;background-position: 50% 0%;color: #fff;transition: 0.3s, background-position 0.3s 0.3s, color 0.3s 0.3s;
}.thick-3 {background: linear-gradient(#000 0 0) 0% calc(-3px - 100%) / var(--d, 0%) 200%no-repeat;transition: 0.3s, background-size 0.3s 0.3s;
}
.thick-3:hover {--d: 100%;background-position: 50% 0%;color: #fff;transition: 0.3s, background-position 0.3s 0.3s, color 0.3s 0.3s;
}.thick-4 {background: linear-gradient(#000 0 0) left / var(--d, 0%) 100% no-repeat, linear-gradient(#000 0 0) right / var(--d, 0%) 100% no-repeat;transition: 0.5s;
}
.thick-4:hover {--d: 100%;color: #fff;
}.thick-5 {background: linear-gradient(#000 0 0) top / 100% var(--d, 0%) no-repeat, linear-gradient(#000 0 0) bottom / 100% var(--d, 0%) no-repeat;transition: 0.5s;
}
.thick-5:hover {--d: 100%;color: #fff;
}.thick-6 {background: linear-gradient(#000 0 0) left / 100% var(--d, 0%) no-repeat;transition: 0.5s;
}
.thick-6:hover {--d: 100%;color: #fff;
}.thick-7 {background: linear-gradient(#000 0 0) left / var(--d, 0%) 100% no-repeat;transition: 0.5s;
}
.thick-7:hover {--d: 100%;color: #fff;
}.thick-8 {background: linear-gradient(#000 0 0) top / 100% var(--d, 0%) no-repeat;transition: 0.5s;
}
.thick-8:hover {--d: 100%;color: #fff;
}/**/
div[class] {display: inline-block;font-size: 40px;font-family: sans-serif;margin: 25px;padding: 8px;cursor: pointer;
}body {text-align: center;
}
十一、滑动
此部分主要介绍了滑动类的动画效果。这些效果需要考虑元素的宽度，适用于等宽字体。通过设置文本阴影、缩进以及背景渐变，并结合 CSS 变量和过渡效果，在鼠标悬停时，文本或元素呈现出滑动的视觉效果。这种效果可以为页面增添一种动态的交互感，使元素更加生动有趣。
下面（的操作）需要我们知道元素的宽度，所以它更适用于等宽字体，在这种情况下我们可以使用 “ch” 单位。
查看效果
html:
<div class="sliding-1">1. Hover me </div>
<div class="sliding-2">2. Hover me </div>
<div class="sliding-3">3. Hover me </div>
<div class="sliding-4">4. Hover me </div>
<div class="sliding-5">5. Hover me </div>
<div class="sliding-6">6. Hover me </div>
<div class="sliding-7">7. Hover me </div>
<div class="sliding-8">8. Hover me </div>
css:
.sliding-1 {text-shadow: var(--t, 0ch) 0 #fff;text-indent: calc(-2 * var(--t, 0ch));background: linear-gradient(currentColor 0 0) right/var(--d, 0) 100% no-repeat;transition: 0.5s linear;
}
.sliding-1:hover {--d: 100%;--t: 11ch;
}.sliding-2 {white-space: nowrap;overflow: hidden;text-shadow: calc(-1 * var(--t, 0ch)) 0 #fff;text-indent: var(--t, 0ch);background: linear-gradient(currentColor 0 0) left/var(--d, 0) 100% no-repeat;transition: 0.5s linear;
}
.sliding-2:hover {--d: 100%;--t: 11ch;
}.sliding-3 {height: 1.2em;white-space: nowrap;overflow: hidden;text-shadow: 0 -1.2em #fff;line-height: var(--t, 1.2em);background: linear-gradient(currentColor 0 0) top/100% var(--d, 0) no-repeat;transition: 0.5s linear;
}
.sliding-3:hover {--d: 100%;--t: 3.6em;
}
.sliding-4 {height: 1.2em;white-space: nowrap;overflow: hidden;text-shadow: 0 calc(-0.5 * var(--t, 0em)) #fff;line-height: calc(1.2em + var(--t, 0em));background: linear-gradient(currentColor 0 0) top/100% var(--d, 0) no-repeat;transition: 0.5s linear;
}
.sliding-4:hover {--d: 100%;--t: 2.4em;
}.sliding-5 {height: 1.2em;color: #fff;text-shadow: 0 -1.2em black;line-height: var(--t, 3.6em);background: linear-gradient(black 0 0) bottom/100% var(--d, 0%) no-repeat;transition: 0.5s linear;
}
.sliding-5:hover {--d: 100%;--t: 1.2em;
}.sliding-6 {height: 1.2em;color: #fff;text-shadow: 0 calc(-0.5 * var(--t, 2.4em)) black;line-height: calc(1.2em + var(--t, 2.4em));background: linear-gradient(black 0 0) bottom/100% var(--d, 0) no-repeat;transition: 0.5s linear;
}
.sliding-6:hover {--d: 100%;--t: 0em;
}
.sliding-7 {text-shadow: 11ch 0 #fff;text-indent: calc(-2 * var(--t, 0px));background: linear-gradient(currentColor 0 0) right/var(--d, 0) 100% no-repeat;transition: 0.5s linear;
}.sliding-7:hover {--d: 100%;--t: 11ch;
}
.sliding-8 {text-shadow: -11ch 0 #fff;text-indent: var(--t, 0);background: linear-gradient(currentColor 0 0) left/var(--d, 0) 100% no-repeat;transition: 0.5s linear;
}.sliding-8:hover {--d: 100%;--t: 11ch;
}/**/
div[class] {display: inline-block;font-size: 40px;font-family: monospace;white-space: nowrap;overflow: hidden;margin: 25px;width: 11ch;cursor: pointer;
}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="inverted-1">1. Hover me </div>
<div class="inverted-2">2. Hover me </div>
<div class="inverted-3">3. Hover me </div>
<div class="inverted-4">4. Hover me </div>
<div class="inverted-5">5. Hover me </div>
<div class="inverted-6">6. Hover me </div>
<div class="inverted-7">7. Hover me </div>
<div class="inverted-8">8. Hover me </div>
css:
.inverted-1 {background: linear-gradient(black 50%, #fff 0) 0 var(--_d, 0) / 100% 200% no-repeat,linear-gradient(#0000 50%, #000 0) 0 var(--_d, 0) / 100% 200% no-repeat;-webkit-background-clip: text, padding-box;background-clip: text, padding-box;transition: 0.8s;
}
.inverted-1:hover {--_d: 50%;
}.inverted-2 {background: linear-gradient(90deg, #000 50%, #fff 0), linear-gradient(-90deg,#000 50%,#fff 0), linear-gradient(90deg, #0000 50%, #000 0), linear-gradient(-90deg, #000050%, #000 0);background-repeat: no-repeat;background-size: 200% 51%;background-position: top left, bottom right;-webkit-background-clip: text, text, padding-box, padding-box;background-clip: text, text, padding-box, padding-box;transition: 0.8s;
}.inverted-2:hover {background-position: top right, bottom left;
}
.inverted-3 {background: linear-gradient(-135deg, #000 50%, #fff 0) var(--_d, 100%) / 250% no-repeat,linear-gradient(-135deg, #0000 50%, #000 0) var(--_d, 100%) / 250% no-repeat;-webkit-background-clip: text, padding-box;background-clip: text, padding-box;transition: 0.8s;
}.inverted-3:hover {--_d: 50%;
}.inverted-4 {background: linear-gradient(to bottom right, #000 50%, #fff 50.1%) left/300% 300%no-repeat, linear-gradient(to bottom right, #0000 50%, #000 50.1%) left/300%300% no-repeat;-webkit-background-clip: text, padding-box;background-clip: text, padding-box;transition: 0.8s;
}
.inverted-4:hover {background-position: center;
}.inverted-5 {background: linear-gradient(#000, 40%, #fff 0 60%, #000 0) left/var(--_p, 0%)no-repeat, linear-gradient(#0000 40%, #000 0 60%, #0000 0) left/var(--_p,0%)no-repeat, #000;-webkit-background-clip: text, padding-box, text;background-clip: text, padding-box, text;transition: 0.8s;
}
.inverted-5:hover {--_p: 100%;
}.inverted-6 {--_g1: conic-gradient(from 90deg at 50% 75%, #000 90deg, #fff 0) no-repeat;--_g2: conic-gradient(from 90deg at 50% 75%, #0000 90deg, #000 0) no-repeat;background: var(--_g1) 0 calc(134% - var(--_p, 0%)), var(--_g2) 0 calc(134% - var(--_p, 0%)), var(--_g1) 100% calc(200% - var(--_p, 0%)), var(--_g2) 100% calc(200% - var(--_p, 0%)), #000;background-size: 50.2% 400%;-webkit-background-clip: text, padding-box;background-clip: text, padding-box;transition: 0.8s;
}
.inverted-6:hover {--_p: 134%;
}.inverted-7 {background: linear-gradient(-45deg, #000 40%, #fff 0 60%, #000 0) right/300% 100%no-repeat, linear-gradient(-45deg, #0000 40%, #000 0 60%, #0000 0) right/300%100% no-repeat;-webkit-background-clip: text, padding-box;background-clip: text, padding-box;transition: 0.8s;
}
.inverted-7:hover {background-position: left;
}.inverted-8 {background: linear-gradient(-45deg, #000 40%, #fff 0 60%, #000 0) right/300% 100%no-repeat, linear-gradient(-45deg, #0000 40%, #000 0 60%, #0000 0) right/300%100% no-repeat;-webkit-background-clip: text, padding-box;background-clip: text, padding-box;
}
.inverted-8:hover {background-position: left;transition: 0.8s;
}/**/
div[class] {color: #0000;font-weight: bold;display: inline-block;font-size: 40px;font-family: sans-serif;margin: 25px;padding: 8px;cursor: pointer;
}body {text-align: center;
}
十四、三维
这部分展示了具有三维效果的动画。通过使用一些高级 CSS 技术并借助 CSS 变量进行控制，在鼠标悬停时，元素呈现出类似三维立方体的视觉效果，包括边框和内部填充的变化。这种效果可以为页面增添一种强烈的立体感和空间感，适用于一些需要营造现代、科技感的页面设计。
注意：下面（内容）使用了一些高级 CSS（技术），不过我考虑到（使用）CSS 变量，以便于控制。
html:
<div class="d-1">1. Hover me </div>
<div class="d-2">2. Hover me </div>
<div class="d-3">3. Hover me </div>
<div class="d-4">4. Hover me </div>css:
.d-1 {--b: 4px;/* border length*/--c: 20px;/* the cube perspective */--g: calc(var(--c) * 0.707);/* 0.707 = cos(45deg) = sin(45deg) */transition: 0.5s;border: solid transparent;border-width: var(--b) var(--b) calc(var(--c) + var(--b)) calc(var(--c) + var(--b));background: linear-gradient(-45deg,transparent var(--g),rgba(255, 255, 255, 0.6) 0) left / var(--c) 100%, linear-gradient(135deg,transparent var(--g),rgba(255, 255, 255, 0.3) 0) bottom / 100% var(--c), conic-gradient(from -90deg at top var(--b) right var(--b),currentColor 270deg,transparent 0), conic-gradient(from 90deg at bottom calc(var(--c) + var(--b)) left calc(var(--c) + var(--b)), currentColor 270deg, transparent 0);background-repeat: no-repeat;background-origin: border-box;transform: translate(calc(var(--c) / -1), calc(var(--c) / 1));clip-path: polygon(var(--c) 0%,var(--c) 0%,100% 0%,100% calc(100% - var(--c)),100% calc(100% - var(--c)),var(--c) calc(100% - var(--c)),var(--c) calc(100% - var(--c)));
}.d-1:hover {transform: translate(0, 0);clip-path: polygon(0% var(--c),var(--c) 0%,100% 0%,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0% 100%,0% 100%);
}.d-2 {--b: 4px;/* border length*/--c: 20px;/* the cube perspective */--g: calc(var(--c) * 0.707);/* 0.707 = cos(45deg) = sin(45deg) */color: blue;transition: 0.5s;border: solid transparent;border-width: var(--b) calc(var(--c) + var(--b)) calc(var(--c) + var(--b)) var(--b);background: linear-gradient(45deg,transparent var(--g),rgba(255, 255, 255, 0.6) 0) right / var(--c) 100%, linear-gradient(-135deg,transparent var(--g),rgba(255, 255, 255, 0.3) 0) bottom / 100% var(--c), conic-gradient(from -180deg at top var(--b) left var(--b),currentColor 270deg,transparent 0), conic-gradient(from 0deg at bottom calc(var(--c) + var(--b)) right calc(var(--c) + var(--b)), currentColor 270deg, transparent 0);background-repeat: no-repeat;background-origin: border-box;transform: translate(calc(var(--c) / 1), calc(var(--c) / 1));clip-path: polygon(calc(100% - var(--c)) 0%,calc(100% - var(--c)) 0%,0% 0%,0% calc(100% - var(--c)),0% calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)));
}.d-2:hover {transform: translate(0, 0);clip-path: polygon(100% var(--c),calc(100% - var(--c)) 0%,0% 0%,0% calc(100% - var(--c)),var(--c) 100%,100% 100%,100% 100%);
}.d-3 {--c: 20px;/* the cube perspective */--g: calc(var(--c) * 0.707);/* 0.707 = cos(45deg) = sin(45deg) */border: solid transparent;border-width: 0 var(--c) var(--c) 0;background: linear-gradient(45deg,transparent var(--g),rgba(255, 255, 255, 0.6) 0) right / var(--c) 100%, linear-gradient(-135deg,transparent var(--g),rgba(255, 255, 255, 0.3) 0) bottom / 100% var(--c);background-repeat: no-repeat;background-origin: border-box;transition: 0.3s, background-color 0.3s 0.3s, color 0.3s 0.3s;transform: translate(calc(var(--c) / 1), calc(var(--c) / 1));clip-path: polygon(calc(100% - var(--c)) 0%,calc(100% - var(--c)) 0%,0% 0%,0% calc(100% - var(--c)),0% calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)));
}.d-3:hover {transition: 0.3s 0.3s, background-color 0.3s, color 0.3s;background-color: black;color: #fff;transform: translate(0, 0);clip-path: polygon(100% var(--c),calc(100% - var(--c)) 0%,0% 0%,0% calc(100% - var(--c)),var(--c) 100%,100% 100%,100% 100%);
}.d-4 {--c: 20px;/* the cube perspective */--g: calc(var(--c) * 0.707);/* 0.707 = cos(45deg) = sin(45deg) */border: solid transparent;border-width: 0 0 var(--c) var(--c);background: linear-gradient(-45deg,transparent var(--g),rgba(255, 255, 255, 0.6) 0) left / var(--c) 100%, linear-gradient(135deg,transparent var(--g),rgba(255, 255, 255, 0.3) 0) bottom / 100% var(--c);background-repeat: no-repeat;background-origin: border-box;transition: 0.3s, background-color 0.3s 0.3s, color 0.3s 0.3s;transform: translate(calc(var(--c) / -1), calc(var(--c) / 1));clip-path: polygon(var(--c) 0%,var(--c) 0%,100% 0%,100% calc(100% - var(--c)),100% calc(100% - var(--c)),var(--c) calc(100% - var(--c)),var(--c) calc(100% - var(--c)));
}.d-4:hover {transition: 0.3s 0.3s, background-color 0.3s, color 0.3s;background-color: blue;color: #fff;transform: translate(0, 0);clip-path: polygon(0% var(--c),var(--c) 0%,100% 0%,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0% 100%,0% 100%);
}/**/
div[class] {display: inline-block;font-size: 40px;font-family: sans-serif;margin: 25px;padding: 8px;cursor: pointer;
}body {text-align: center;
}
查看效果
