当前位置: 首页 > 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…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; 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)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

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 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

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配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...