web前端之实现霓虹灯背景魔术卡、旋转的背景动画、模糊效果、边框、变量、filter
MENU
- 前言
- 效果图
- html
- style
前言
代码段定义一个名为
Magic Card
的卡片,并通过一系列CSS属性和动画效果来美化和增强该卡片的视觉效果。
效果图
html
<div class="card">Magic Card
</div>
style
代码
@property --rotate {syntax: "<angle>";initial-value: 132deg;inherits: false;
}:root {--card-height: 65vh;--card-width: calc(var(--card-height) / 1.5);
}body {width: 100vw;height: 100vh;display: flex;align-items: center;flex-direction: column;margin: 0;padding-top: 2rem;padding-bottom: 2rem;box-sizing: border-box;background: #212534;.card {position: relative;width: var(--card-width);height: var(--card-height);display: flex;justify-content: center;align-items: center;padding: 2px;border-radius: 4px;text-align: center;font-size: 1.5em;font-family: cursive;background: #191c29;color: rgb(88, 199, 250);cursor: pointer;}.card:hover {color: rgb(88, 199, 250);transition: color 1s;}.card:hover:before,.card:hover:after {animation: none;opacity: 0;}.card::before,.card::after {content: "";position: absolute;z-index: -1;background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);animation: spin 2.5s linear infinite;}.card::before {width: 104%;height: 102%;top: -1%;left: -2%;border-radius: 4px;}.card::after {width: 100%;height: 100%;top: calc(var(--card-height) / 6);right: 0;left: 0;opacity: 1;margin: 0 auto;transform: scale(0.8);transition: opacity .5s;filter: blur(calc(var(--card-height) / 6));}
}@keyframes spin {0% {--rotate: 0deg;}100% {--rotate: 360deg;}
}
解析
自定义属性(@property --rotate)
1、@property
用于定义自定义CSS属性(也称为CSS变量)的语法、初始值和继承性。
2、--rotate
是自定义属性的名称。
3、syntax: "<angle>";
定义–rotate属性的语法为一个角度值。
4、initial-value: 132deg;
设置–rotate属性的初始值为132deg。
5、inherits: false;
表示该属性不继承父元素的值。
定义根元素的全局CSS变量
1、:root
选择器表示文档的根元素(即html元素),通常用于定义全局的CSS变量。
2、--card-height: 65vh;
定义卡片的高度为视口高度的65%。
3、--card-width: calc(var(--card-height) / 1.5);
定义卡片的宽度为其高度的2/3,即通过calc函数动态计算得出。
body元素样式
1、width: 100vw;
和height: 100vh;
设置body的宽度和高度分别为视口的100%。
2、display: flex;
、justify-content: center;
和align-items: center;
使body元素成为弹性盒布局,并将子元素水平垂直居中。
3、margin: 0;
清除外边距,padding-top: 2rem;
和padding-bottom: 2rem;
设置上下内边距。
4、box-sizing: border-box;
确保padding和border不会影响元素的宽度和高度计算。
5、background: #212534;
将背景色设为深蓝色。
.card样式
01、position: relative;
允许卡片内部的伪元素使用绝对定位。
02、width: var(--card-width); 和 height: var(--card-height);
使用前面定义的CSS变量来设置卡片的宽度和高度。
03、display: flex;
、justify-content: center;
和align-items: center;
使卡片内容居中。
04、padding: 2px;
设置卡片的内边距。
05、border-radius: 4px;
使卡片的边角有一个4px的圆角。
06、text-align: center;
让文本在卡片内居中对齐。
07、font-size: 1.5em;
设置文本大小为1.5倍的默认字体大小。
08、font-family: cursive;
设置字体为手写体风格。
09、background: #191c29;
将卡片背景色设置为深色。
10、color: rgb(88, 199, 250);
设置文字颜色为浅蓝色。
11、cursor: pointer;
将鼠标悬停在卡片上时显示为手形图标。
悬停时.card的样式
color: rgb(88, 199, 250);
在悬停时,将文字颜色设置为浅蓝色。
transition: color 1s;
在1秒内平滑地过渡到新的文字颜色。
伪元素的动画
1、animation: none;
在悬停时,禁用伪元素的动画。
2、opacity: 0;
将伪元素的透明度设为0,使它们不可见。
卡片的伪元素样式
1、content: "";
定义伪元素的内容为空。
2、position: absolute;
使用绝对定位。
3、z-index: -1;
将伪元素置于.card之下。
4、background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
设定伪元素的背景图为一个线性渐变,颜色由浅蓝到深蓝再到紫色,且渐变角度由–rotate变量控制。
5、animation: spin 2.5s linear infinite;
让伪元素在2.5秒内不断旋转,且无限循环。
.card::before样式
1、width: 104%;
和height: 102%;
使伪元素比卡片略大。
2、top: -1%;
和left: -2%;
将伪元素稍微向上和向左偏移。
3、border-radius: 4px;
使伪元素也具有圆角,与.card边角保持一致。
.card::after样式
1、width: 100%;
和height: 100%;
设置伪元素的大小与卡片相同。
2、top: calc(var(--card-height) / 6);
将伪元素向下偏移卡片高度的六分之一。
3、right: 0;
和left: 0;
让伪元素水平居中。
4、opacity: 1;
将伪元素的透明度设为1,使其可见。
5、margin: 0 auto;
水平居中对齐。
6、transform: scale(0.8);
缩小伪元素至原来的80%。
7、transition: opacity .5s;
在透明度变化时,平滑过渡0.5秒。
8、filter: blur(calc(var(--card-height) / 6));
为伪元素添加模糊效果,模糊量为卡片高度的六分之一。
@keyframes定义旋转动画
@keyframes spin
定义一个名为spin的关键帧动画。
0% { --rotate: 0deg; }
和100% { --rotate: 360deg; }
表示动画从0度旋转到360度,即完成一整圈旋转。
相关文章:

web前端之实现霓虹灯背景魔术卡、旋转的背景动画、模糊效果、边框、变量、filter
MENU 前言效果图htmlstyle 前言 代码段定义一个名为Magic Card的卡片,并通过一系列CSS属性和动画效果来美化和增强该卡片的视觉效果。 效果图 html <div class"card">Magic Card </div>style 代码 property --rotate {syntax: "<a…...
几款免费的时序数据库对比
InfluxDB、TDengine、OpenTSDB、QuestDB都是当前主流的时序数据库,它们在性能、功能、适用场景等方面各有特点。下面将从多个维度对这四个数据库进行对比分析: 一、性能 InfluxDB: 高效的时间序列数据写入性能,自定义TSM引擎&am…...

基于springboot的乐享田园系统
TOC springboot181基于springboot的乐享田园系统 第1章 绪论** 1.1 课题背景 二十一世纪互联网的出现,改变了几千年以来人们的生活,不仅仅是生活物资的丰富,还有精神层次的丰富。在互联网诞生之前,地域位置往往是人们思想上不…...
深入解析Objective-C中NSParagraphStyle的段落样式处理艺术
标题:深入解析Objective-C中NSParagraphStyle的段落样式处理艺术 在Objective-C的世界中,文本排版是一个复杂但至关重要的话题。NSParagraphStyle作为其中的核心组件,扮演着决定文本段落外观和布局的关键角色。本文将深入探讨NSParagraphSty…...

Qt编程技巧小知识点(2)GPIB缓存区数据读取
文章目录 Qt编程技巧小知识点(2)GPIB缓存区数据读取小结 Qt编程技巧小知识点(2)GPIB缓存区数据读取 大端小端的问题,其主要表现如下例子: 例如:输入为QByteArray str "#14M\xB6q\xC1\n&qu…...

数的个位相加
给定一个非负整数 num,反复将各个位上的数字相加,直到结果为一位数。返回这个结果。 示例 1: 输入: num 38输出: 2 解释: 各位相加的过程为: 38 --> 3 8 --> 11 11 --> 1 1 --> 2 由于 2 是一位数,所以返回 2。…...
专业技能(挖坑填坑)——MYSQL的索引、日志、事务、存储引擎、锁机制等相关原理
熟悉MySQL的使用,熟悉MYSQL的索引、日志、事务、存储引擎、锁机制等相关原理。 1.mysql索引,索引的底层数据结构实现 索引就是目录可以帮助快速的找到对应的资源。 MySQL默认的InnoDB存储引擎使用的索引底层数据结构是BTree。BTree是一种多路搜索查找树…...
C++(27): 线程池
目录 1. 概述 2. 例程 (1)ThreadPool.h (2)ThreadPool.cpp (3)Start.cpp (4)编译 1. 概述 线程池技术绝不是C独有的,Java和Python都有比较晚完善的线程池构造接口…...

每日一题-贪心算法
122. 买卖股票的最佳时机 II - 力扣(LeetCode) 55. 跳跃游戏 - 力扣(LeetCode) 这个题目一开始肯定是会懵,就比如说一开始先跳几步,之后再怎么跳,其实我们就可以用最大范围来算就行了࿰…...
PSO 算法实例(手动推导过程)
PSO 算法实例 引言正文PSO 算法步骤PSO 实例步骤1 定义目标函数步骤2 初始化每个粒子的位置和速度步骤3 使用目标函数进行评估步骤4 更新单个粒子的最佳位置(局部最优值)步骤5 更新全局最佳位置(全局最优值)步骤6 更新每个粒子的位置和速度步骤7 使用目标函数评估新的位置步…...
解决antd TreeSelect 返回值不包含父节点问题 -自定义组件(react)
在写一个表单时使用了antd的 TreeSelect,在对TreeSelect的值提交时发现,父节点的值在半选状态时未提交,在选中状态时(子节点全选),子节点不提交,只提交父节点,这与后端需求不符&…...

花四小时,写了个在线实时绘制等值面图小软件,明晚上线,喜欢的小伙伴关注哦
科研党的福音,绘图再也不需要安装一堆软件了,可以在线绘图了; 只需要传入绘制的区间、色值、以及所需要绘制的数据就可以直接出图了,可绘制各种等值面图,比如降水分布,高温分布,人口分布&#x…...
c++的vector用法
文章目录 1. 创建和初始化 std::vector2. 添加和删除元素3. 访问和遍历元素4. std::vector 的其他常用操作 std::vector 是 C 标准库中的一个动态数组容器,提供了灵活的存储和访问功能。 1. 创建和初始化 std::vector #include <iostream> #include <vect…...

【Linux网络】Linux网络初探:开启网络世界的大门
W...Y的主页 😊 代码仓库分享💕 前言:我们已经系统的学习了Linux的基本操作、进程、线程、文件、通信等待,但是在如今社会没有网络通信方式是万万不行的,今天我们就走进网络中,系统的学习一下有关Linux网…...

目录、用户与组、出错相关函数、时间函数
一、目录相关函数及属性 1、 opendir()函数 opendir 用于打开一个目录,并返回一个目录流指针。name:要打开的目录的路径。 返回值:成功时返回指向目录流的指针,失败时返回 NULL。 #include <dirent.h> DIR *opendir(con…...

<keep-alive> 一分钟了解
<keep-alive> 一分钟了解 <keep-alive> 是 Vue.js 提供的一个抽象组件,它的主要用途是在页面或组件切换时保留其状态,避免重复执行昂贵的渲染操作,从而提升应用性能。 文章目录 <keep-alive> 一分钟了解 一、 <keep-ali…...
Android 启动动画太生硬
跟 android:launchMode"singleTask"属性无关系 请禁用路由 ARouter.getInstance() .build(Routes.Main.MAIN) .withTransition(R.anim.activity_anim_in, R.anim.activity_anim_out).navigation() 正确做法是 val intent Intent(thisSplashActivity,MainActivit…...
深度学习中常用概念总结
最近在做深度学习,里面涉及到很多概念,有的名称都差不多容易记混。所以写这篇文章总结一下。眼过千遍不如手过一遍。 1. 轮数(Epochs): 一轮(Epoch)指的是整个训练数据集在训练过程中被完整使用一次。…...

进 程
1.进程:进行中的程序。 微观串行,宏观并行。 程序的一次执行过程 进程是程序的一个实例 一个程序可以对应一个或多个进程。 2.为什么需要进程? 3.进程的组成部分: 进程 pcb 块 栈|堆|bss|data|text 其中: 家族…...

Taro-UI
一、安装Taro UI 进入项目文件,执行项目 //使用yarn安装taro-ui yarn add taro-ui//使用npm安装taro-ui npm install taro-ui//注:因为要支持自定义主题功能,需要将样式从组件中抽离出来,在微信小程序中依赖 globalClass 功能&a…...
vscode里如何用git
打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...

高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制࿰…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...

让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...

k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版
1.题目描述 2.思路 当前的元素可以重复使用。 (1)确定回溯算法函数的参数和返回值(一般是void类型) (2)因为是用递归实现的,所以我们要确定终止条件 (3)单层搜索逻辑 二…...