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. Python 环境傻瓜式搭建 ：Anaconda概述

    Anaconda概述 Anaconda是一个用于科学计算的Python发行版,支持 Linux, Mac, Windows系统,提供了包管理与环境管理的功能,可以很方便地解决多版本python并存.切 ...

  2. 浅谈Integer缓存机制原理

    面试题引入 这里引申出一个经典问题,看下面代码 Integer a = 100; Integer b = 100; System.out.println(a == b);//true Integer ...

  3. win指令学习收集

    要执行多句,需要用到逻辑判断 1 & 2 1成不成功都会执行2 1 && 2 1成功才会执行2 1 || 2 1不成功才会执行2

  4. visual studio安装MFC模板

    计算机图形学 奇怪的重点 需要单击选中使用C++的桌面开发 才会跳出右侧的选项 要么就是展开右侧的收缩

  5. Flutter调试debug或者打包release帧率只有60的原因

    问题描述 最近发现Flutter中引入像素较大的静态图片或者字体导致调试或者打包之后在高刷手机上帧率只有60的问题. 测试设备为小米13,可在开发者选项中直接打开帧率显示, 也可使用statsfl插件 ...

  6. 使用 nuxi build 命令构建你的 Nuxt 应用程序

    title: 使用 nuxi build 命令构建你的 Nuxt 应用程序 date: 2024/8/30 updated: 2024/8/30 author: cmdragon excerpt: n ...

  7. SQL Server磁盘空间清理 【转】

    SQL Server在删除数据后,会重新利用这部分空间,所以如果不是空间紧张的情况下,可以不回收.回收一般先回收日志文件,因为这个回收速度非常快,可以短时间内清理出一部分可用空间.回收步骤: 1.查看 ...

  8. Innodb对表加锁的过程分析

    本节我们通过一些具体的案例来分析Innodb对表上锁的过程.具体场景如下图所示. 在这里我们将语句分为4类:普通select(快照读).锁定读.半一致性读 和 insert语句. 普通读 普通的sel ...

  9. 小tips：CSS实现0.5px的边框的两种方式

    方式一 <style> .border { width: 200px; height: 200px; position: relative; } .border::before { con ...

  10. BOM – 操作 Query

    前言 ASP.NET Core 写过一篇关于操作 query 的 ASP.NET Core – 操作 Uri 和 Query. 前端偶尔也会需要做出 query. URLSearchParams 之前 ...