100 种下划线 / 覆盖层动画 | 终极 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%;
}

/**/
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% 3px
      no-repeat, linear-gradient(currentColor 0 0) 0 100% / var(--d, 0) 3px
      no-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% 3px
      no-repeat, linear-gradient(currentColor 0 0) 100% 100% / var(--d, 0) 3px
      no-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% 3px
      no-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% 3px
      no-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% 3px
      no-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% 3px
      no-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%) 3px
      no-repeat, linear-gradient(currentColor 0 0) var(--d, -101%) 100% /50% 3px
      no-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 3px
      no-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%) 3px
    no-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) bottom
      left / 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), currentColor
        0);
  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), currentColor
        0);
  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, #0000
        50%, #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;
}

查看效果

原文地址：https://blog.csdn.net/eqmaster/article/details/142935910

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：「从零开始的 Vue 3 系列」：第十一章——跨域问题解决方案全解析
下一篇：跨域问题和前端攻击

Spring Boot在知识管理中的应用
在概念模式的设计中，E-R模型法是最常见的设计方法。同时，一个大型的计算机网站系统，必须有一个正确的设计指导思想，通过合理选择数据结构、网络结构、操作系统以及开发环境，构成一个完善的网络体系结构，才能
阅读更多2024-10-17
CMake 教程（三）添加库的使用要求
目标参数的使用要求可以更好地控制库或可执行文件的链接和包含行，同时还能在 CMake 内部更好地控制目标的传递属性。中的代码，以使用现代 CMake 方法。我们将让我们的库定义自己的使用要求，以便在必
阅读更多2024-10-17
支付宝开放平台-开发者社区——AI 日报「10 月 17 日」
在现有AI能力的支撑下，可能只有10%的产品值得用AI再做一遍，其他90%的产品加了AI后，90%的人尝鲜后就会忘记它，还有一部分人甚至会对AI产生反感，以及觉得AI很鸡肋。第二种就是AI+ChatB
阅读更多2024-10-17
出现接地故障电流现象，安科瑞ASJ剩余电流继电器可以避免吗？
ASJ剩余电流继电器能够实时监测线路中的漏电流，一旦漏电流达到或超过设定值，立即动作切断故障电路，确保电气系统的安全稳定运行。高灵敏度：剩余电流继电器具有高灵敏度，能够检测到微小的漏电电流，从而及时切
阅读更多2024-10-17
【DDPG】DDPG的离散实现（含代码）
由于想用ddpg来应用到离散动作空间的环境，实现和ppo等其他算法的性能对比。故研究此问题。（欢迎star）
阅读更多2024-10-17
Linux权限和开发工具(1)
vi/vim的区别简单点来说，它们都是多模式编辑器，不同的是vim是vi的升级版本，它不仅兼容vi的所有指令，而且还有一些新的特性在里面。但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好,
阅读更多2024-10-17
【算法】C++中的二分查找
二分查找，也被称为折半查找，是一种在有序数组中高效查找目标元素的算法。它的基本思想是将待查找的区间不断地折半，通过比较中间元素与目标元素的大小关系，逐步缩小查找范围，直到找到目标元素或者确定目标元素不
阅读更多2024-10-17
老房装修弱电箱必须加吗？
业主听完说这个弱电箱里边后期放的就只有入户光纤猫，路由器我会放到电视柜上，至于AP面板我不需要，对网络没有强烈需求。对于没有特殊要求的业主来说，弱电箱可以没有，把光纤引到电视柜的位置，光纤长点短点，业
阅读更多2024-10-17
Qt-系统QThread多线程介绍使用(62)
Qt-系统QThread多线程介绍使用
阅读更多2024-10-17
使用SpringMVC搭建WEB项目时报错404的问题排查解决以及web.xml配置文件init-param行标红问题
还有Tomcat的版本过高，目前用的是10 版本，于是试着针对 Tomcat 的版本也进行降降，就把 Tomcat10版本降到了 Tomcat9版本。经过检查，基本的错误原因都可以完全排除，程序代码
阅读更多2024-10-17

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

主要效果

1. 基础效果

2. 持续效果

3. 双重效果

4. 分阶段动画

5. 突现效果

6. 圆弧效果

7. 消融效果

8. 无限效果

9. 全方位效果

10. 厚重

11. 滑动

12. 华丽

13. 倒转

14. 三维

一、基础用法

二、边框效果

三、持续效果

四、分段效果

五、 突现效果

六、圆弧效果

七、消融效果

八、无限效果

九、全方位效果

十、厚重

十一、滑动

十二、华丽

十三、倒转

十四、三维

相关文章

五、突现效果