先上效果
🌟 CSS边框流光闪烁阴影动画效果是一种令人印象深刻的技术，它通过动态的光影变化，为网页元素增添了独特的视觉吸引力。本文将深入探讨如何使用CSS来实现这种高级动画效果，从基础的阴影应用到复杂的光流动画，一步步引导您创造出令人惊叹的视觉效果，让您的设计作品在众多网站中脱颖而出。
完整代码
以下是完整代码：
HTML:
<div class="cardBox"> 边框流光闪烁阴影效果 </div>
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; } }
🌟 以下是实现这个效果的关键技术：
- CSS变量：代码中使用了CSS变量（也称为CSS自定义属性），如--rotate、--card-height和--card-width。这些变量可以在整个文档中重复使用，使得代码更易于维护。
- CSS动画：使用了@keyframes规则创建了一个名为spin的动画，该动画会改变--rotate变量的值，从而实现旋转效果。
- 伪元素：使用了:before和:after伪元素来创建卡片的闪光效果。这两个伪元素都应用了spin动画，并且使用了线性渐变背景来模拟光线。
- CSS过滤器：在:after伪元素上使用了blur过滤器，使得其背景图像模糊，从而增强了光线的效果。
