css动画效果(边框流光闪烁阴影效果)

简介: css动画效果(边框流光闪烁阴影效果)

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.关键点

以下是实现这个效果的关键技术:

  1. CSS变量:代码中使用了CSS变量(也称为CSS自定义属性),如–rotate、–card-height和–card-width。这些变量可以在整个文档中重复使用,使得代码更易于维护。
  2. CSS动画:使用了@keyframes规则创建了一个名为spin的动画,该动画会改变–rotate变量的值,从而实现旋转效果。
  3. 伪元素:使用了:before和:after伪元素来创建卡片的闪光效果。这两个伪元素都应用了spin动画,并且使用了线性渐变背景来模拟光线。
  4. CSS过滤器:在:after伪元素上使用了blur过滤器,使得其背景图像模糊,从而增强了光线的效果。


相关文章
|
27天前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
21天前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
36 5
|
27天前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
27天前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
|
27天前
|
前端开发 JavaScript
还在为酷炫css动画背景头疼吗?1分钟解决
还在为酷炫css动画背景头疼吗?1分钟解决
|
27天前
|
前端开发
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
|
27天前
|
前端开发
一键复制HTML+CSS动画 打造炫酷的搜索框
一键复制HTML+CSS动画 打造炫酷的搜索框
|
27天前
|
容器
html+css动画来袭!登录人人可领
html+css动画来袭!登录人人可领
|
27天前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
26天前
|
前端开发 JavaScript 开发者
css过渡与动画
css过渡与动画
32 0