1.整体效果
CSS边框流光闪烁阴影动画效果是一种令人印象深刻的技术，它通过动态的光影变化，为网页元素增添了独特的视觉吸引力。本文将深入探讨如何使用CSS来实现这种高级动画效果，从基础的阴影应用到复杂的光流动画，一步步引导您创造出令人惊叹的视觉效果，让您的设计作品在众多网站中脱颖而出。
2.完整代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框流光闪烁阴影效果</title> <link rel="stylesheet" type="text/css" href="5_31.css"> </head> <body> <div class="cardBox"> 边框流光闪烁阴影效果 </div> </body> </html>
CSS
@property --rotate { syntax: "<angle>"; initial-value: 132deg; inherits: false; } :root { --card-height: 65vh; --card-width: calc(var(--card-height) / 1.5); } body { min-height: 100vh; background: #212534; display: flex; align-items: center; flex-direction: column; padding-top: 2rem; padding-bottom: 2rem; box-sizing: border-box; } .cardBox { background: #191c29; width: var(--card-width); height: var(--card-height); padding: 3px; position: relative; border-radius: 6px; justify-content: center; align-items: center; text-align: center; display: flex; font-size: 1.5em; color: rgb(88 199 250 / 0%); cursor: pointer; font-family: cursive; } .cardBox:hover { color: rgb(88 199 250 / 100%); transition: color 1s; } .cardBox:hover:before, .cardBox:hover:after { animation: none; opacity: 0; } .cardBox::before { content: ""; width: 104%; height: 102%; border-radius: 8px; background-image: linear-gradient( var(--rotate) , #5ddcff, #3c67e3 43%, #4e00c2); position: absolute; z-index: -1; top: -1%; left: -2%; animation: spin 2.5s linear infinite; } .cardBox::after { position: absolute; content: ""; top: calc(var(--card-height) / 6); left: 0; right: 0; z-index: -1; height: 100%; width: 100%; margin: 0 auto; transform: scale(0.8); filter: blur(calc(var(--card-height) / 6)); background-image: linear-gradient( var(--rotate) , #5ddcff, #3c67e3 43%, #4e00c2); opacity: 1; transition: opacity .5s; animation: spin 2.5s linear infinite; } @keyframes spin { 0% { --rotate: 0deg; } 100% { --rotate: 360deg; }}
3.关键点
以下是实现这个效果的关键技术：
- CSS变量：代码中使用了CSS变量（也称为CSS自定义属性），如–rotate、–card-height和–card-width。这些变量可以在整个文档中重复使用，使得代码更易于维护。
- CSS动画：使用了@keyframes规则创建了一个名为spin的动画，该动画会改变–rotate变量的值，从而实现旋转效果。
- 伪元素：使用了:before和:after伪元素来创建卡片的闪光效果。这两个伪元素都应用了spin动画，并且使用了线性渐变背景来模拟光线。
- CSS过滤器：在:after伪元素上使用了blur过滤器，使得其背景图像模糊，从而增强了光线的效果。
