css动画效果（边框流光闪烁阴影效果）

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa7odDQYuaatklJUMc5anU10PWLAt14rNnNUD6oHJG9U63fc0yibiapuDViatVk62ma3K63oqQ3U1VtMQ/640?wx_fmt=gif&from=appmsg&wxfrom=13

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过滤器，使得其背景图像模糊，从而增强了光线的效果。

css动画效果（边框流光闪烁阴影效果）

1.整体效果

2.完整代码

3.关键点

悦读