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

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

  1. CSS变量：代码中使用了CSS变量（也称为CSS自定义属性），如–rotate、–card-height和–card-width。这些变量可以在整个文档中重复使用，使得代码更易于维护。

  2. CSS动画：使用了@keyframes规则创建了一个名为spin的动画，该动画会改变–rotate变量的值，从而实现旋转效果。

  3. 伪元素：使用了:before和:after伪元素来创建卡片的闪光效果。这两个伪元素都应用了spin动画，并且使用了线性渐变背景来模拟光线。

  4. CSS过滤器：在:after伪元素上使用了blur过滤器，使得其背景图像模糊，从而增强了光线的效果。

css动画效果（边框流光闪烁阴影效果）的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  4. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  5. 运动曲线提升CSS动画效果

    原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...

  6. css 动画效果

    要搞就搞明白,一知半解时停止研究 损失最大     css3意义: CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点 ...

  7. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

  8. react中使用css动画效果

    index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...

  9. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  10. css动画效果之transition（动画过渡效果属性）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Aspire8一文通

    Aspire8一文通 0.简介 微软Aspire是微软今年推出的一个全新的平台无关.语言无关的新框架,它的设计目的是简化云原生应用的开发.部署和管理过程.Aspire的读音是[əˈspaɪər],它的 ...

  2. SMU Summer 2024 Contest Round 4

    SMU Summer 2024 Contest Round 4 Made Up 题意 给你三个序列 \(A,B,C\) ,问你满足 \(A_i = B_{C_j}\) 的 \((i,j)\) 对有多少 ...

  3. AREA |.text|, CODE, READONLY, ALIGN=2详解

    AREA |.text|, CODE, READONLY, ALIGN=2         ;AREA |.text| 选择段 |.text|. ;CODE表示代码段,READONLY表示只读(缺省) ...

  4. 公众号3w粉丝了，说说我的下一步计划吧

    终于30000了 不知不觉,已经3w粉丝了,2020年8月8日到现在一共1年零6个月. 到目前为止,原创文章一共 194 篇, 文章头条阅读量基本在1000-3000, 也终于有了两篇文章阅读过万. ...

  5. 在Ubuntu 16.04 LTS服务器上安装FreeRADIUS和Daloradius的方法

    FreeRADIUS 为AAA Radius Linux下开源解决方案,DaloRadius为图形化web管理工具. freeradius一般用来进行账户认证管理,记账管理,常见的电信运营商的宽带账户 ...

  6. Linux内核如何判断地址是否位于用户空间？

    一. 问题描述 access_ok函数是什么原理? 二.问题分析 我们在内核空间和用户空间进行数据拷贝的时候必须判断用户空间地址是否合法. 主要通过偶函数access_ok来判断. 1. Linux用 ...

  7. php预定义变量~$_SERVER[‘QUERY_STRING‘]

    php $_SERVER['QUERY_STRING']函数 • 简介$_SERVER函数( 获取当前服务器信息) 预定义变量就是系统自己定义好的变量,直接使用就可以.预定义变量都是以数组的形式存在的 ...

  8. Linux 检查端口监听情况

    使用 lsof $ sudo lsof -i :22 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME sshd 963 root 3u IPv4 ...

  9. 关于SQLServer数据库的READ_COMMITTED_SNAPSHOT隔离级别

    默认情况下,SQL Server的事务隔离级别是READ COMMITED.刚开始我理解这个模式就是读已经提交的,那也就是说并发一个事务去更新,一个事务查询同一条数据应该是像Mysql.Oracle不 ...

  10. C#/.NET/.NET Core优质学习资料，干货收藏！

    前言 今天大姚给大家分享一些C#/.NET/.NET Core优质学习资料,希望可以帮助到有需要的小伙伴. 什么是 .NET? .NET 是一个免费的.跨平台的.开源开发人员平台,用于构建许多不同类型 ...