阳江网站推广优化公司,网络营销专业是学什么的,微信h5制作软件,官方网站建设合同还在为你的菜单项和链接寻找动画效果而感到疲惫吗#xff1f;
不用再找了#xff01;这里列出了 100 多种不同的动画。从简单的到更复杂的#xff0c;你肯定能找到自己想要的。
无需 SVG#xff08;可缩放矢量图形#xff09;#xff0c;无需 JavaScript#xff08;脚…
还在为你的菜单项和链接寻找动画效果而感到疲惫吗
不用再找了这里列出了 100 多种不同的动画。从简单的到更复杂的你肯定能找到自己想要的。
无需 SVG可缩放矢量图形无需 JavaScript脚本语言无需额外标签无需伪元素无需关键帧……所有这些动画都是利用背景、过渡效果并且只通过一个元素来实现的。只需添加一个类就可以享受这些动画效果了。
不依赖伪元素所以你可以轻松地将它们用于诸如输入框我们无法在其中使用伪元素之类的元素上。
关键字css 特效 动画 样式 纯 css
主要效果
1. 基础效果
2. 持续效果
3. 双重效果
4. 分阶段动画
5. 突现效果
6. 圆弧效果
7. 消融效果
8. 无限效果
9. 全方位效果
10. 厚重
11. 滑动
12. 华丽
13. 倒转
14. 三维
一、基础用法
这部分主要介绍了一些基础的动画效果实现方式。通过对一系列类名为basic - *的元素设置不同的背景渐变样式并利用 CSS 变量和过渡效果实现了在鼠标悬停时下划线样式的变化。这些效果从简单的单边下划线到复杂的位置变化下划线都有涵盖为后续更复杂的动画效果奠定了基础。
div classbasic-00. Hover me/div
div classbasic-11. Hover me/div
div classbasic-22. Hover me/div
div classbasic-33. Hover me/div
div classbasic-44. Hover me/div
div classbasic-55. Hover me/div
div classbasic-66. 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 classallsides-11. Hover me /div
div classallsides-22. Hover me /div
div classallsides-33. Hover me /div
div classallsides-44. Hover me /div
div classallsides-55. Hover me /div
div classallsides-66. Hover me /div
div classallsides-77. Hover me /div
div classallsides-88. Hover me /divcss:
.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 classallsides-11. Hover me /div
div classallsides-22. Hover me /div
div classallsides-33. Hover me /div
div classallsides-44. Hover me /div
div classallsides-55. Hover me /div
div classallsides-66. Hover me /div
div classallsides-77. Hover me /div
div classallsides-88. Hover me /divcss:
.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 classtwo-steps-11. Hover me /div
div classtwo-steps-22. Hover me /div
div classtwo-steps-33. Hover me /div
div classtwo-steps-44. Hover me /div
div classtwo-steps-55. Hover me /div
div classtwo-steps-66. Hover me /div
div classtwo-steps-77. Hover me /divcss:
.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 classunexpected-11. Hover me /div
div classunexpected-22. Hover me /div
div classunexpected-33. Hover me /div
div classunexpected-44. Hover me /div
div classunexpected-55. Hover me /div
div classunexpected-66. Hover me /div
div classunexpected-77. Hover me /div
div classunexpected-88. Hover me /divcss:
.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 classrounded-11. Hover me /div
div classrounded-22. Hover me /div
div classrounded-33. Hover me /div
div classrounded-44. Hover me /div
div classrounded-55. Hover me /div
div classrounded-66. Hover me /div
div classrounded-77. Hover me /div
div classrounded-88. Hover me /divcss:
.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 classfading-11. Hover me /div
div classfading-22. Hover me /div
div classfading-33. Hover me /div
div classfading-44. Hover me /div
div classfading-55. Hover me /div
div classfading-66. Hover me /div
div classfading-77. Hover me /divcss:
.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 classinfinite-11. Hover me /divdiv classinfinite-22. Hover me /divdiv classinfinite-33. Hover me /divdiv classinfinite-44. Hover me /divdiv classinfinite-55. Hover me /divdiv classinfinite-66. Hover me /divdiv classinfinite-77. Hover me /divdiv classinfinite-88. Hover me /divcss:
.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 classallsides-11. Hover me /div
div classallsides-22. Hover me /div
div classallsides-33. Hover me /div
div classallsides-44. Hover me /div
div classallsides-55. Hover me /div
div classallsides-66. Hover me /div
div classallsides-77. Hover me /div
div classallsides-88. Hover me /divcss:
.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 classthick-11. Hover me /div
div classthick-22. Hover me /div
div classthick-33. Hover me /div
div classthick-44. Hover me /div
div classthick-55. Hover me /div
div classthick-66. Hover me /div
div classthick-77. Hover me /div
div classthick-88. Hover me /divcss:
.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 classsliding-11. Hover me /div
div classsliding-22. Hover me /div
div classsliding-33. Hover me /div
div classsliding-44. Hover me /div
div classsliding-55. Hover me /div
div classsliding-66. Hover me /div
div classsliding-77. Hover me /div
div classsliding-88. Hover me /divcss:
.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 classallsides-11. Hover me /div
div classallsides-22. Hover me /div
div classallsides-33. Hover me /div
div classallsides-44. Hover me /div
div classallsides-55. Hover me /div
div classallsides-66. Hover me /div
div classallsides-77. Hover me /div
div classallsides-88. Hover me /divcss:
.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 classinverted-11. Hover me /div
div classinverted-22. Hover me /div
div classinverted-33. Hover me /div
div classinverted-44. Hover me /div
div classinverted-55. Hover me /div
div classinverted-66. Hover me /div
div classinverted-77. Hover me /div
div classinverted-88. Hover me /divcss:
.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 classd-11. Hover me /div
div classd-22. Hover me /div
div classd-33. Hover me /div
div classd-44. 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;
}查看效果
