当前位置: 首页 > news >正文

web前端之实现霓虹灯背景魔术卡、旋转的背景动画、模糊效果、边框、变量、filter

MENU

  • 前言
  • 效果图
  • html
  • style


前言

代码段定义一个名为Magic Card的卡片,并通过一系列CSS属性和动画效果来美化和增强该卡片的视觉效果。


效果图

1


2


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的卡片&#xff0c;并通过一系列CSS属性和动画效果来美化和增强该卡片的视觉效果。 效果图 html <div class"card">Magic Card </div>style 代码 property --rotate {syntax: "<a…...

几款免费的时序数据库对比

InfluxDB、TDengine、OpenTSDB、QuestDB都是当前主流的时序数据库&#xff0c;它们在性能、功能、适用场景等方面各有特点。下面将从多个维度对这四个数据库进行对比分析&#xff1a; 一、性能 InfluxDB&#xff1a; 高效的时间序列数据写入性能&#xff0c;自定义TSM引擎&am…...

基于springboot的乐享田园系统

TOC springboot181基于springboot的乐享田园系统 第1章 绪论** 1.1 课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不…...

深入解析Objective-C中NSParagraphStyle的段落样式处理艺术

标题&#xff1a;深入解析Objective-C中NSParagraphStyle的段落样式处理艺术 在Objective-C的世界中&#xff0c;文本排版是一个复杂但至关重要的话题。NSParagraphStyle作为其中的核心组件&#xff0c;扮演着决定文本段落外观和布局的关键角色。本文将深入探讨NSParagraphSty…...

Qt编程技巧小知识点(2)GPIB缓存区数据读取

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

数的个位相加

给定一个非负整数 num&#xff0c;反复将各个位上的数字相加&#xff0c;直到结果为一位数。返回这个结果。 示例 1: 输入: num 38输出: 2 解释: 各位相加的过程为&#xff1a; 38 --> 3 8 --> 11 11 --> 1 1 --> 2 由于 2 是一位数&#xff0c;所以返回 2。…...

专业技能(挖坑填坑)——MYSQL的索引、日志、事务、存储引擎、锁机制等相关原理

熟悉MySQL的使用&#xff0c;熟悉MYSQL的索引、日志、事务、存储引擎、锁机制等相关原理。 1.mysql索引&#xff0c;索引的底层数据结构实现 索引就是目录可以帮助快速的找到对应的资源。 MySQL默认的InnoDB存储引擎使用的索引底层数据结构是BTree。BTree是一种多路搜索查找树…...

C++(27): 线程池

目录 1. 概述 2. 例程 &#xff08;1&#xff09;ThreadPool.h &#xff08;2&#xff09;ThreadPool.cpp &#xff08;3&#xff09;Start.cpp &#xff08;4&#xff09;编译 1. 概述 线程池技术绝不是C独有的&#xff0c;Java和Python都有比较晚完善的线程池构造接口…...

每日一题-贪心算法

122. 买卖股票的最佳时机 II - 力扣&#xff08;LeetCode&#xff09; 55. 跳跃游戏 - 力扣&#xff08;LeetCode&#xff09; 这个题目一开始肯定是会懵&#xff0c;就比如说一开始先跳几步&#xff0c;之后再怎么跳&#xff0c;其实我们就可以用最大范围来算就行了&#xff0…...

PSO 算法实例(手动推导过程)

PSO 算法实例 引言正文PSO 算法步骤PSO 实例步骤1 定义目标函数步骤2 初始化每个粒子的位置和速度步骤3 使用目标函数进行评估步骤4 更新单个粒子的最佳位置(局部最优值)步骤5 更新全局最佳位置(全局最优值)步骤6 更新每个粒子的位置和速度步骤7 使用目标函数评估新的位置步…...

解决antd TreeSelect 返回值不包含父节点问题 -自定义组件(react)

在写一个表单时使用了antd的 TreeSelect&#xff0c;在对TreeSelect的值提交时发现&#xff0c;父节点的值在半选状态时未提交&#xff0c;在选中状态时&#xff08;子节点全选&#xff09;&#xff0c;子节点不提交&#xff0c;只提交父节点&#xff0c;这与后端需求不符&…...

花四小时,写了个在线实时绘制等值面图小软件,明晚上线,喜欢的小伙伴关注哦

科研党的福音&#xff0c;绘图再也不需要安装一堆软件了&#xff0c;可以在线绘图了&#xff1b; 只需要传入绘制的区间、色值、以及所需要绘制的数据就可以直接出图了&#xff0c;可绘制各种等值面图&#xff0c;比如降水分布&#xff0c;高温分布&#xff0c;人口分布&#x…...

c++的vector用法

文章目录 1. 创建和初始化 std::vector2. 添加和删除元素3. 访问和遍历元素4. std::vector 的其他常用操作 std::vector 是 C 标准库中的一个动态数组容器&#xff0c;提供了灵活的存储和访问功能。 1. 创建和初始化 std::vector #include <iostream> #include <vect…...

【Linux网络】Linux网络初探:开启网络世界的大门

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#xff1a;我们已经系统的学习了Linux的基本操作、进程、线程、文件、通信等待&#xff0c;但是在如今社会没有网络通信方式是万万不行的&#xff0c;今天我们就走进网络中&#xff0c;系统的学习一下有关Linux网…...

目录、用户与组、出错相关函数、时间函数

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

<keep-alive> 一分钟了解

<keep-alive> 一分钟了解 <keep-alive> 是 Vue.js 提供的一个抽象组件&#xff0c;它的主要用途是在页面或组件切换时保留其状态&#xff0c;避免重复执行昂贵的渲染操作&#xff0c;从而提升应用性能。 文章目录 <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…...

深度学习中常用概念总结

最近在做深度学习&#xff0c;里面涉及到很多概念&#xff0c;有的名称都差不多容易记混。所以写这篇文章总结一下。眼过千遍不如手过一遍。 1. 轮数&#xff08;Epochs&#xff09;: 一轮&#xff08;Epoch&#xff09;指的是整个训练数据集在训练过程中被完整使用一次。…...

进 程

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

Taro-UI

一、安装Taro UI 进入项目文件&#xff0c;执行项目 //使用yarn安装taro-ui yarn add taro-ui//使用npm安装taro-ui npm install taro-ui//注&#xff1a;因为要支持自定义主题功能&#xff0c;需要将样式从组件中抽离出来&#xff0c;在微信小程序中依赖 globalClass 功能&a…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; 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&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

让AI看见世界:MCP协议与服务器的工作原理

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

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;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.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...