当前位置：首页 > article >正文

用HTML和CSS生成炫光动画卡片

article 2026/2/20 11:40:55

这个效果结合了渐变、旋转和悬浮效果的炫酷动画示例，使用HTML和CSS实现。

一、效果

二、实现

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炫光动画卡片</title><style>body {margin: 0;min-height: 100vh;display: flex;justify-content: center;align-items: center;background: #0a0a0a;overflow: hidden;}.card {width: 300px;height: 400px;background: rgba(255, 255, 255, 0.05);border-radius: 15px;position: relative;display: flex;justify-content: center;align-items: center;overflow: hidden;cursor: pointer;transition: all 0.5s;}.card:hover {transform: scale(1.05);box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);}.card::before {content: '';position: absolute;width: 150px;height: 140%;background: linear-gradient(#00fffc, #ff00ff);animation: rotate 4s linear infinite;}.card::after {content: '';position: absolute;inset: 4px;background: #0a0a0a;border-radius: 12px;}@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.content {position: relative;z-index: 1;color: white;padding: 20px;text-align: center;}.glowing-text {font-size: 2em;font-weight: bold;background: linear-gradient(45deg, #ff00ff, #00fffc, #ffeb3b);-webkit-background-clip: text;color: transparent;animation: gradient 3s ease infinite;}@keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}.particles span {position: absolute;width: 4px;height: 4px;background: #fff;border-radius: 50%;animation: particle 2s linear infinite;opacity: 0;}@keyframes particle {0% {transform: translateY(0) translateX(0);opacity: 1;}100% {transform: translateY(-100px) translateX(50px);opacity: 0;}}/* 生成随机粒子位置 */.particles span:nth-child(1) { left: 20%; animation-delay: 0s; }.particles span:nth-child(2) { left: 50%; animation-delay: 0.5s; }.particles span:nth-child(3) { left: 70%; animation-delay: 1s; }/* 可以添加更多粒子... */</style>
</head>
<body><div class="card"><div class="particles"><span></span><span></span><span></span></div><div class="content"><div class="glowing-text">CSS MAGIC</div><p>Hover me!</p></div></div>
</body>
</html>

这个动画效果包含以下特点：

科技感渐变色旋转边框
悬浮时的放大和发光效果
流动渐变色文字
背景粒子效果
磨砂玻璃质感卡片
流畅的过渡动画

实现原理：

使用伪元素创建旋转的渐变色边框
通过clip-path和overflow:hidden实现边框裁剪
使用background-clip实现文字渐变色
通过关键帧动画实现颜色流动和元素旋转
粒子效果使用绝对定位和动画延迟
使用CSS变换实现流畅的悬浮交互

你可以通过以下方式进一步自定义：

修改渐变色值来改变整体配色
调整animation-duration改变动画速度
添加更多粒子或修改粒子动画路径
修改card的尺寸和形状
添加更多交互效果（如点击效果）

用HTML和CSS生成炫光动画卡片

这个效果结合了渐变、旋转和悬浮效果的炫酷动画示例，使用HTML和CSS实现。一、效果二、实现代码如下： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&quo…...

编程日记 2026/2/15 16:50:27

Vue 3 + Composition API + Vite + Pinia + Element Plus 构建项目的完整指南

以下是使用 Vue 3 + Composition API + Vite + Pinia + Element Plus 构建项目的完整指南，包含 TypeScript 支持配置： 1. 创建项目使用 Vite 初始化项目 npm create vite@latest my-vue-app -- --template vue-ts如果不需要 TypeScript，使用 --template vue 进入项目目录…...

编程日记 2026/2/18 11:26:09

FPGA_YOLO(三)

上一篇讲的是完全映射，也就是block中的所包含的所有的卷积以及归一，池化卷积举例总共6个等都在pl侧进行处理（写一个top 顶层里面conv 1 bn1 relu1 pool1 conv1*1 conv 2 bn2 relu2 pool2 conv1*1 ....总共6个 ），…...

编程日记 2026/2/14 16:36:03

使用 SQL CTE（公共表表达式）优化数据查询的实践

目录一、背景二、什么是 CTE？ 三、CTE 的基本结构四、示例分析五、CTE 的作用六、优势分析一、背景在数据分析和数据库管理中，SQL 查询的效率和可读性是至关重要的。随着数据量的不断增加，复杂的查询变得越来越难以管理和理解。…...

编程日记 2026/2/14 7:02:51

旅游CMS选型：WordPress、Joomla与Drupal对比

内容概要在旅游行业数字化转型进程中，内容管理系统（CMS）的选择直接影响网站运营效率与用户体验。WordPress、Joomla和Drupal作为全球主流的开源CMS平台，其功能特性与行业适配性存在显著差异。本文将从旅游企业核心需求出发&…...

编程日记 2026/2/16 7:57:50

全面适配iOS 18.4！通付盾加固产品全面升级，护航App安全上架

引言： 苹果官方新规落地！ 自2025年4月24日起，所有提交至App Store Connect的应用必须使用Xcode 16或更高版本构建，否则将面临审核驳回风险！Beta版iOS 18.4、iPadOS 18.4现已推出，通付盾iOS加固产品率先完成…...

编程日记 2026/2/14 15:56:28

bash 和 pip 是两种完全不同用途的命令，分别用于[系统终端操作]和[Python 包管理]

bash 和 pip 是两种完全不同用途的命令，分别用于系统终端操作和 Python 包管理。以下是它们的核心区别、用法及常见场景对比： 1. 本质区别特性bashpip类型Shell 命令解释器（一种脚本语言）Python 包管理工具作用执行系统命令、…...

编程日记 2026/2/17 8:39:31

SQL 通用表表达式（CTE ）

目录概念：CTE： Common table Expression CTE 语法 CTE Demo 概念：CTE： Common table Expression 通用表表达式（CTE）是SQL中用于简化复杂查询的工具，第一次上线于SQL Server 2005。 CTE提供…...

编程日记 2026/2/17 7:15:20

一台电脑最多能接几个硬盘？

在使用电脑时，硬盘空间不够是许多用户都会遇到的问题。无论是摄影师、剪辑师等需要大量存储空间的专业人士，还是游戏玩家、数据备份爱好者，都可能希望通过增加硬盘来扩展存储容量。然而，一台电脑究竟最多能接多少个硬盘&#xff1…...

编程日记 2026/2/16 7:22:46

MATLAB中iscell函数用法

目录语法说明示例确定数组是否为元胞数组 iscell函数的功能是确定输入是否为元胞数组。语法 tf iscell(A) 说明如果 A 是元胞数组，则 tf iscell(A) 返回 1 (true)。否则，将返回 0 (false)。示例确定数组是否为元胞数组创建一个元胞数…...

编程日记 2026/2/17 11:40:24

【玩转全栈】---- Django 基于 Websocket 实现群聊（解决channel连接不了）

学习视频： 14-11 群聊（一）_哔哩哔哩_bilibili 目录 Websocket 连接不了？ 收发数据断开连接完整代码聊天室的实现聊天室一聊天室二 settings 配置 consumer 配置多聊天室 Websocket 连接不了？ 基于这篇博客&…...

编程日记 2026/2/19 14:52:24

如何快速解决django报错：cx_Oracle.DatabaseError: ORA-00942: table or view does not exist

我们在使用django连接oracle进行编程时，使用model进行表映射对接oracle数据时，默认表名组成结构为：应用名_类名（如：OracleModel_test），故即使我们库中存在表test，运行查询时候&#…...

编程日记 2026/2/19 20:16:12

Selenium之简介

Selenium简介首先，让我们看看官网是怎么定义的 Selenium是一个支持web浏览器自动化的一系列工具和库的综合项目，提供了扩展来模拟用户和浏览器的交互，用于扩展浏览器分配的分发服务器；用于W3C WebDriver规范的基础架构其实&a…...

编程日记 2026/2/12 17:02:26

pip 安装某个包之后，Jupyter Lab仍旧显示包冲突；例如：Numba needs NumPy 2.1 or less. Got NumPy 2.2.

异常提示 Numba needs NumPy 2.1 or less. Got NumPy 2.2. --------------------------------------------------------------------------- ImportError Traceback (most recent call last) Cell In[8], line 53 import pywt4 import matplot…...

编程日记 2026/2/14 7:18:28

本地安装git

下载git 通过官网下载 ：Git - Downloading Package 若此页面无法直达，请删掉download/win尝试 2.双击运行安装选择安装目录： 选择配置，默认不动 git安装目录名默认即可 Git 的默认编辑器，建议使用默认的 Vim 编辑器…...

编程日记 2026/2/19 2:41:01

小程序内表格合并功能实现—行合并

功能介绍：支付宝小程序手写表格实现行内合并，依据动态数据自动计算每次需求合并的值，本次记录行内合并，如果列内合并，同理即可实现前端技术：grid布局 display：grid 先看实现效果: axml&…...

编程日记 2026/2/15 6:36:23

SSE协议介绍和python实现

概述： SSE（Server-Sent Events）协议是一种允许服务器向客户端实时推送更新的技术，基于HTTP协议，常用于实时数据推送特点： 单向通信：服务器向客户端推送数据，客户端无法发送数据。基…...

编程日记 2026/2/9 21:54:08

甘肃旅游服务平台+论文源码视频演示

4 系统设计 4.1系统概要设计甘肃旅游服务平台并没有使用C/S结构，而是基于网络浏览器的方式去访问服务器，进而获取需要的数据信息，这种依靠浏览器进行数据访问的模式就是现在用得比较广泛的适用于广域网并且没有网速限制要求的小程序结构&am…...

编程日记 2026/2/16 13:53:54

Spring Boot 3虚拟线程的使用

在Spring Boot非Web应用中，使用虚拟线程时程序提前终止的问题及解决方案，可以通过以下步骤深入理解和验证： 问题根源分析 JVM退出机制 Java中，当所有非守护线程结束时，JVM会立即退出。即使存在正在运行的守护线程&…...

编程日记 2026/2/14 15:03:59

3、pytest实现参数化

在 pytest 中，参数化（parametrization）是一种强大的功能，可以让你用不同的输入数据重复执行同一个测试函数。这种功能非常有用，可以帮助你显著减少重复代码并提高测试覆盖率。参数化的主要作用是： 测试多…...

编程日记 2026/2/13 13:49:27

【解决】Linux命令报错：Cannot find a valid baseurl for repo: centos-sclo-rh/x86_64

报错命令 yum install zabbix-web-mysql-scl zabbix-apache-conf-scl centos使用scl切换软件版本时提示Cannot find a valid baseurl for repo: centos-sclo-rh/x86_64 报错原因 CentOS7的SCL源在2024年6月30日停止维护了。当scl源里面默认使用了centos官方的地址&#x…...

编程日记 2026/2/15 8:35:02

WebRTC中音视频服务质量QoS之FEC+NACK调用流程

WebRTC中音视频服务质量QoS之FECNACK调用流程 WebRTC中音视频服务质量QoS之FECNACK调用流程 WebRTC中音视频服务质量QoS之FECNACK调用流程前言一、WebRTC中FEC基础原理1. FEC基础操作异或操作XOR2、 FEC中行向和纵向计算3、 WebRTC中媒体包分组和生成FEC的包数① kFecRateT…...

编程日记 2026/2/20 4:20:01

神经网络知识点整理

目录一、深度学习基础与流程二、神经网络基础组件三、卷积神经网络（CNN）编辑四、循环神经网络（RNN）与LSTM 五、优化技巧与调参六、应用场景与前沿编辑七、总结与展望编辑一、深度学习基础与流程机器学习流…...

编程日记 2026/2/15 11:52:26

远程办公新体验：用触屏手机流畅操作电脑桌面

在数字化浪潮的推动下，远程办公已从“应急选项”转变为职场常态。无论是居家隔离、差旅途中，还是咖啡厅临时办公，高效连接公司电脑的需求从未如此迫切。然而，传统的远程控制软件常因操作复杂、画面卡顿或功能限制而影响效率。如今…...

编程日记 2026/2/15 3:10:40

【面试八股】：常见的锁策略

常见的锁策略 synchronized （标准库的锁不够你用了）锁策略和 Java 不强相关，其他语言涉及到锁，也有这样的锁策略。 1. 悲观锁，乐观锁（描述的加锁时遇到的场景） 悲观锁：预测接下来…...

编程日记 2026/2/19 0:52:56

【python】OpenCV—Hand Detection

文章目录 1、功能描述2、代码实现3、效果展示4、完整代码5、参考6、其它手部检测和手势识别的方案更多有趣的代码示例，可参考【Programming】 1、功能描述基于 opencv-python 和 mediapipe 进行手部检测 2、代码实现导入必要的库函数 import cv2 import media…...

编程日记 2026/2/17 5:48:41

es6的100个问题

基础概念解释 let、const 和 var 的区别。什么是块级作用域？ES6 如何实现它？箭头函数和普通函数的主要区别是什么？解释模板字符串（Template Literals）的用途，并举例嵌套变量的写法。解构赋值的语法是什么…...

编程日记 2026/2/12 22:08:01

【Git 常用指令速查表】

Git 常用指令速查表 Git 常用指令速查表目录1. 初始化仓库2. 提交代码流程3. 分支管理4. 远程仓库操作5. 撤销操作6. 查看状态与日志7. 其他实用指令完整操作示例常用场景速查表 Git 常用指令速查表目录初始化仓库提交代码流程分支管理远程仓库操作撤销操作查看状态与日志其…...

编程日记 2026/2/15 19:37:11

Flink中聚合算子介绍

前言在flink api中，聚合算子是非常常用的。所谓的聚合就是在分组的基础上做比较计算的操作。下面通过几个简单案例来说明聚合算子的用法和注意事项。聚合算子案例因为flink的api操作流程比较固定，从获取执行环境》获取数据源》执行数据转换操作》输…...

编程日记 2026/2/15 10:37:36

【基础】Windows 中通过 VSCode 使用 GCC 编译调试 C++

准备安装 VSCode 及 C 插件。通过 MSYS2 安装 MinGW-w64 工具链，为您提供必要的工具来编译代码、调试代码并配置它以使用IntelliSense。参考：Windows 中的 Linux 开发工具链验证安装： gcc --version g --version gdb --version三个核心配…...

编程日记 2026/2/19 1:01:44

一、效果

二、实现

相关文章：