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…...

测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...

C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...

iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...