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

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/19380.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

笔记-docker基于ubuntu22.04安装Jitsi Meet

背景 利用JitsiMeet打造一个可以在线会议的环境&#xff0c;根据躺的坑&#xff0c;做个记录 参考 JitsMeet部署安装说明 开始操作 环境 docker run -it --name ubuntu22.04 ubuntu:22.04 /bin/bash问题 1、安装 openjdk-11 apt install openjdk-11-jdk配置环境变量&…

es初始化

一.初始化es public void initES() {/*LOGGER.info("host" host);LOGGER.info("port" port);LOGGER.info("scheme" scheme);LOGGER.info("userName" userName);LOGGER.info("password" password);*/// 客户端连接创建…

自媒体必用的50 个最佳 ChatGPT 社交媒体帖子提示prompt通用模板教程

在这个信息爆炸的时代&#xff0c;社交媒体已经成为我们生活中不可或缺的一部分。无论是品牌宣传、个人展示&#xff0c;还是日常交流&#xff0c;我们都离不开它。然而&#xff0c;要在众多信息中脱颖而出&#xff0c;吸引大家的关注并不容易。这时候&#xff0c;ChatGPT这样的…

uniapp的tooltip功能放到表单laber

在uniapp中&#xff0c;tooltip功能通常是通过view组件的hover-class属性来实现的&#xff0c;而不是直接放在form的label上。hover-class属性可以定义当元素处于hover状态时的样式类&#xff0c;通过这个属性&#xff0c;可以实现一个类似tooltip的效果。 以下是一个简单的例…

代码随想录35期Day56-Java

Day56题目 LeetCode647回文子串的数量 核心思想:使用数组dp[i][j]表示s从i到j是否是回文串 class Solution {public int countSubstrings(String s) {// dp[i][j] 表示s从i到j是不是回文串boolean[][] dp new boolean[s.length()][s.length()];for(int i 0 ; i < s.len…

跨境经营的艺术:中资企业海外市场售后服务创新与挑战

出海&#xff0c;已不再是企业的“备胎”&#xff0c;而是必须面对的“大考”&#xff01;在这个全球化的大潮中&#xff0c;有的企业乘风破浪&#xff0c;勇攀高峰&#xff0c;也有的企业在异国他乡遭遇了“水土不服”。 面对“要么出海&#xff0c;要么出局”的抉择&#xff…

JavaScript笔记一-初识JavaScript

1、JavaScript的起源 JavaScript诞生于1995年&#xff0c;它的出现主要是用于处理网页中的前端验证。所谓的前端验证&#xff0c;就是指检查用户输入的内容是否符合一定的规则。比如&#xff1a;用户名的长度&#xff0c;密码的长度&#xff0c;邮箱的格式等。 2、JavaScript…

一分钟学习数据安全——自主管理身份SSI基本概念

之前我们已经介绍过数字身份的几种模式。其中&#xff0c;分布式数字身份模式逐渐普及演进的结果就是自主管理身份&#xff08;SSI&#xff0c;Self-Sovereign Identity&#xff09;。当一个人能够完全拥有和控制其数字身份&#xff0c;而无需依赖中心化机构&#xff0c;这就是…

FreeRTOS实时系统 在任务中增加数组等相关操作 导致单片机起不来或者挂掉

在调试串口任务中增加如下代码&#xff0c;发现可以用keil进行仿真&#xff0c;但是烧录程序后&#xff0c;调试串口没有打印&#xff0c;状态灯也不闪烁&#xff0c;单片机完全起不来 博主就纳了闷了&#xff0c;究竟是什么原因&#xff0c;这段代码可是公司永流传的老代码了&…

香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试(三)

整期笔记索引 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试&#xff08;一&#xff09; 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试&#xff08;二&#xff09; 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试&#xff08;…

【MySQL数据库】:MySQL复合查询

目录 基本查询回顾 多表查询 自连接 子查询 单行子查询 多行子查询 多列子查询 在from子句中使用子查询 合并查询 前面我们讲解的mysql表的查询都是对一张表进行查询&#xff0c;在实际开发中这远远不够。 基本查询回顾 【MySQL数据库】&#xff1a;MySQL基本查…

【测试】linux快捷指令工具cxtool

简介 登录linux时,我们经常需要重复输入一些指令. 这个工具可以把这些指令预置,需要的时候鼠标一点,会自动按预置的字符敲击键盘,敲击出指令. 下载地址 https://download.csdn.net/download/bandaoyu/89379371 使用方法 1,编辑配置文件&#xff0c;自定义自己的快捷指令。 2…

WEB三大主流框架之Vue.js

Vue.js是一个用于构建用户界面的JavaScript框架[^1^]。它基于标准HTML、CSS和JavaScript构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助开发者高效地开发用户界面。Vue的核心功能包括&#xff1a; - 声明式渲染&#xff1a;Vue基于标准HTML扩展了一…

运算符重载(下)

目录 前置和后置重载前置的实现Date& Date::operator()代码 后置的实现Date Date::operator(int )代码 前置--和后置--重载前置--的实现Date& Date::operator--( )代码 后置--的实现Date Date::operator--(int )代码 流插入运算符重载流插入运算符重载的实现流提取运算…

北京中冶赛迪面试总结

自我介绍项目介绍 目录 1.介绍一下mysql中的索引&#xff1f; 2.在 MySQL 中&#xff0c;如果您有一个 (a, b, c) 的联合索引&#xff0c;查询条件仅包含 a 和 c 而没有 b索引的生效情况&#xff1f; 3.mysql 锁的类型&#xff1f; 4.表中的数据重复删除怎么实现&#xff…

深入解析力扣167题:两数之和 II(双指针法详解及模拟面试问答)

在本篇文章中&#xff0c;我们将详细解读力扣第167题“两数之和 II - 输入有序数组”。通过学习本篇文章&#xff0c;读者将掌握如何使用多种方法来解决这一问题&#xff0c;并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释和ASCII图解&#xff0c;以便于理…

任何图≌自己这一几何最起码常识推翻直线公理让R外标准实数一下子浮出水面

黄小宁 h定理&#xff1a;点集AB≌B的必要条件是A≌B。 证&#xff1a;若AB则A必可恒等变换地变为BA≌A&#xff0c;而恒等变换是保距变换。证毕。 如图所示R轴即x轴各元点x沿x轴正向不保距平移变为点y2x就使x轴沿本身拉伸&#xff08;放大&#xff09;变换为y2x轴不≌x轴&…

代码随想录算法训练营第四十四天| 背包问题、背包问题之滚动数组、416. 分割等和子集

背包问题 题目链接&#xff1a;背包问题 文档讲解&#xff1a;代码随想录/背包问题 视频讲解&#xff1a;视频讲解-背包问题 状态&#xff1a;已完成&#xff08;1遍&#xff09; 解题过程 这几天属实是有点分身乏术了&#xff0c;先直接看题解AC了&#xff0c;二刷的时候再…

校园疫情防控|基于SprinBoot+vue的校园疫情防控系统(源码+数据库+文档)

校园疫情防控系统 目录 基于SprinBootvue的校园疫情防控系统 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2后台功能模块 5.2.1管理员功能 5.2.2学生功能 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#x…

Linux网络编程:传输层协议|UDP|TCP

知识引入&#xff1a; 端口号&#xff1a; 当应用层获得一个传输过来的报文时&#xff0c;这时数据包需要知道&#xff0c;自己应该送往哪一个应用层的服务&#xff0c;这时就引入了“端口号”&#xff0c;通过区分同一台主机不同应用程序的端口号&#xff0c;来保证数据传输…