CSS按钮-跑马灯边框
思路很简单，实现方法有很多很多。但是大体思路与实现方法都类似：渐变色 + 动画，主要区别在动画的具体实现
0、HTML 结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>流光按钮</title>
</head>
<body><div class="wrapper"><div class="btn">按钮</div></div>
</body>
</html>
1-1、CSS 实现一
<style>*{padding: 0;margin: 0;}@property --rotate{syntax: "<angle>";initial-value: 20deg;inherits: false;}body{background-color: rgba(243, 243, 243);}.wrapper{position: relative;padding: 50px;background-color: rgb(0, 0, 0);z-index: -4;height: 500px;}.wrapper .btn{overflow: hidden;position: relative;text-align: center;border-radius: 7px;width: 100px;height: 50px;line-height: 50px;font-size: 22px;color: white;user-select: none;margin: 50px auto;}.btn::before{position: absolute;border-radius: 7px;content: "";inset: -20px;background: linear-gradient(var(--rotate), transparent 1%, rgb(255, 0, 191) , #00b7ff, rgba(255, 0, 34, 0.719), transparent 98%);transform-origin: bottom left;z-index: -2;transition: all .4;animation: spin 2.4s linear infinite;transform-origin: 50% 50%;}.btn::after{content: "";position: absolute;border-radius: 8px;background-color: rgb(41, 41, 41);inset: 3px;z-index: -1;}@keyframes spin {0%{--rotate: 0deg;}100%{--rotate: 360deg;}}
</style>
1-2、CSS 实现二
<style>*{padding: 0;margin: 0;}body{background-color: rgba(243, 243, 243);}.wrapper{position: relative;padding: 50px;background-color: rgb(0, 0, 0);z-index: -4;height: 500px;}.wrapper .btn{overflow: hidden;position: relative;text-align: center;border-radius: 7px;width: 100px;height: 50px;line-height: 50px;font-size: 22px;color: white;user-select: none;margin: 50px auto;}.btn::before{position: absolute;border-radius: 7px;content: "";inset: -20px;background: linear-gradient(0deg, transparent 1%, rgb(255, 0, 191) , #00b7ff, rgba(255, 0, 34, 0.719), transparent 98%);transform-origin: bottom left;z-index: -2;transition: all .4;animation: spin 2.4s linear infinite;transform-origin: 50% 50%;}.btn::after{content: "";position: absolute;border-radius: 8px;background-color: rgb(41, 41, 41);inset: 3px;z-index: -1;}@keyframes spin {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style>
相关文章：
CSS按钮-跑马灯边框
思路很简单，实现方法有很多很多。但是大体思路与实现方法都类似：渐变色 动画，主要区别在动画的具体实现 0、HTML 结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><titl…...
【PCIE系统学习】Gen1/2Gen3/4 symobl与OrderSet概念对比
这个专栏要干的事：学习PCIE理论知识，学会PCIE IP/VIP的使用。可以达到上手做项目，而不是空有理论 适合谁看：正在学习PCIE 设计验证，但学的过于零散。想有对比的系统的学习。 低价收费的目的：抵制胡乱传播转载现象。 版本控制：便于增加内容以及勘误 版本说明v20230829 …...
C++ Qt 中QMimeDatabase类详细介绍以及应用场景
C Qt 中QMimeDatabase类详细介绍以及应用场景 文章目录 C Qt 中QMimeDatabase类详细介绍以及应用场景一、QMimeDatabase类是什么？二、QMimeDatabase类中的关键功能和特点三、QMimeDatabase的用法四、QMimeDatabase的应用场景 一、QMimeDatabase类是什么？…...
深度学习7:生成对抗网络 – Generative Adversarial Networks | GAN
生成对抗网络 – GAN 是最近2年很热门的一种无监督算法，他能生成出非常逼真的照片，图像甚至视频。我们手机里的照片处理软件中就会使用到它。 目录 生成对抗网络 GAN 的基本原理 大白话版本 非大白话版本 第一阶段：固定「判别器D」&#x…...
R语言空气污染数据的地理空间可视化和分析：颗粒物2.5（PM2.5）和空气质量指数（AQI）...
原文链接：http://tecdat.cn/?p23800 由于空气污染对公众健康的不利影响，人们一直非常关注。世界各国的环境部门都通过各种方法（例如地面观测网络）来监测和评估空气污染问题（点击文末“阅读原文”获取完整代码数据&…...
实现excel导出最简单方式
今天来记录一下导出excel的实现方式，导出的格式是xlsx的文件。 这里用到的是hutool的工具包，依赖如下： <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.5&…...
【每日一题Day310】LC1654到家的最少跳跃次数 | BFS
到家的最少跳跃次数【LC1654】 有一只跳蚤的家在数轴上的位置 x 处。请你帮助它从位置 0 出发，到达它的家。 跳蚤跳跃的规则如下： 它可以 往前 跳恰好 a 个位置（即往右跳）。它可以 往后 跳恰好 b 个位置（即往左跳&…...
[Android AIDL] --- AIDL原理简析
上一篇文章已经讲述了如何在Android studio中搭建基于aidl的cs模型框架，只是用起来了，这次对aidl及cs端如何调用的原理进行简单分析 1 创建AIDL文件 AIDL 文件可以分为两类。 一类是用来定义接口方法，声明要暴露哪些接口给客户端调用&#…...
企业的固定资产管理怎么操作
一家拥有多台大型设备的工厂，这些设备需要定期进行保养和维护，以确保其正常运转。而企业内部员工由于专业知识和技能的不同，需要分工协作才能更好地完成各项工作任务。因此，在设备资产管理方面，如何实现高效、便捷、透…...
Rust 进阶学习
Rust 进阶学习 文章目录 Rust 进阶学习所有权作用域移动和克隆涉及函数的所有权机制涉及参数的所有权涉及返回值的所有权 引用和租借可变引用 枚举类枚举成员的属性枚举匹配 结构体结构体方法结构体关联函数 错误处理不可恢复错误可恢复错误 Rust代码组织管理Module默认的Modul…...
保护网站安全：学习蓝莲花的安装和使用，复现跨站脚本攻击漏洞及XSS接收平台
这篇文章旨在用于网络安全学习，请勿进行任何非法行为，否则后果自负。 环境准备 一、XSS基础 1、反射型XSS 攻击介绍 原理 攻击者通过向目标网站提交包含恶意脚本的请求，然后将该恶意脚本注入到响应页面中，使其他用户在查看…...
Redis——如何解决redis穿透、雪崩、击穿问题
目录 一、查询商品信息的常规代码示例二、缓存击穿2.1、缓存击穿的理解2.2、缓存击穿的解决方案2.3、解决缓存击穿的代码示例 三、缓存雪崩3.1、缓存雪崩的理解3.2、缓存雪崩的解决方案3.2.1、缓存集中过期的情况3.2.2、缓存服务器宕机的情况3.2.3、缓存服务器断电的情况 3.3、…...
MySQL一行记录是如何存储的？
目录 MySQL的数据存放在哪个文件？ 表空间文件的结构是怎么样的？ 1、行（row） 2、页（page） 3、区（extent） 4、段（segment） InnoDB 行格式有哪些…...
[element-ui] el-tree全部展开与收回
shrinkTreeNode () {// 改变一个全局变量this.treeStatus !this.treeStatus;// 改变每个节点的状态this.changeTreeNodeStatus(this.$refs.attrList.store.root); },// 改变节点的状态 changeTreeNodeStatus (node) {node.expanded this.treeStatus;for (let i 0; i < no…...
git 统计（命令）
查询某人某个时刻提交了多少代码 added 添加代码 removed 删除代码 total 总代码 git log --author刘俊秦 --since2023-08-01 00:00:00 --until2023-08-23 23:00:00 --prettytformat: --numstat | awk { add $1; subs $2; loc $1 - $2 } END { printf "added lines: %s…...
斐波那契1（矩阵快速幂加速递推，斐波那契前n项平方和）
链接：登录—专业IT笔试面试备考平台_牛客网 来源：牛客网 Keven 特别喜欢斐波那契数列，已知 fib11fib_11fib11，fib21fib_21fib21，对于 n>3n>3n>3，fibnfibn−2fibn−1fib_{n}fib_{n-2}fib_{n…...
minikube mac 启动
系统信息如下 最开始使用的minikube是1.22.0版本，按照如下命令启动： minikube start --memory7851 --cpus4 --image-mirror-countrycn遇到了下面一些问题： 1、拉取coredns:v1.8.0镜像失败 Error response from daemon: manifest for regis…...
从零开始学习 Java：简单易懂的入门指南之查找算法及排序算法（二十）
查找算法及排序算法 常见的七种查找算法：1. 基本查找2. 二分查找3. 插值查找4. 斐波那契查找5. 分块查找6. 哈希查找7. 树表查找 四种排序算法：1. 冒泡排序1.1 算法步骤1.2 动图演示1.3 代码示例 2. 选择排序2.1 算法步骤2.2 动图演示 3. 插入排序3.1 算…...
非煤矿山风险监测预警算法 yolov8
非煤矿山风险监测预警算法通过yolov8网络模型深度学习算法框架，非煤矿山风险监测预警算法在煤矿关键地点安装摄像机等设备利用智能化视频识别技术，能够实时分析人员出入井口的情况，人数变化并检测作业状态。YOLO的结构非常简单，就…...
Ansible学习笔记（一）
1.什么是Ansible 官方网站：https://docs.ansible.com/ansible/latest/installation_guide/intro_installation.html Ansible是一个配置管理和配置工具，类似于Chef，Puppet或Salt。这是一款很简单也很容易入门的部署工具，它使用SS…...
4.2% 稳健扩容！工业厂房从传统基建向智慧绿色赛道破局
一、全球工业厂房市场规模工业厂房作为工业生产的核心载体，是支撑制造业发展的重要基础设施，其市场规模变化与全球工业经济活跃度高度绑定。据恒州诚思最新调研统计，2025 年全球工业厂房市场规模已达62580 亿元，在全球工业经济复苏…...
终极Xbox手柄性能检测指南：5个技巧让你的游戏控制器发挥最大潜力
终极Xbox手柄性能检测指南：5个技巧让你的游戏控制器发挥最大潜力 【免费下载链接】XInputTest Xbox 360 Controller (XInput) Polling Rate Checker 项目地址: https://gitcode.com/gh_mirrors/xin/XInputTest 你是否曾经在激烈游戏对战中感觉手柄响应不够灵…...
长波双色InAs/GaSb超晶格红外探测器芯片：从材料设计到焦平面集成
1. 项目概述：从“双色”到“芯片”的技术跨越在红外探测领域，追求“看得更清、看得更远、看得更准”是永恒的主题。我们这次要聊的“长/长波双色InAs/GaSb超晶格焦平面探测器芯片”，听起来名字很长很专业，但它本质上解决的是一个非…...
极域电子教室防控制软件JiYuTrainer：重获学习自主权的智能解决方案
极域电子教室防控制软件JiYuTrainer：重获学习自主权的智能解决方案 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 你是否曾在计算机课堂上被极域电子教室的全屏广播限…...
用GNU Radio和USRP N310/X310手把手搭建一个雷达通信一体化系统（附完整GRC流程图）
从零构建基于GNU Radio与USRP的雷达通信融合系统实战指南 在软件定义无线电（SDR）技术蓬勃发展的今天，将雷达探测与无线通信功能集成到同一硬件平台已成为可能。这种一体化设计不仅能降低设备成本，还能实现频谱资源共享，…...
面试必问：医学知识库 RAG 怎么设计？这次彻底讲透
医学知识库 RAG 怎么设计？一次讲清指南检索、文献召回、权限控制与可追溯回答 大家好，我是一名有 4 年工作经验的 Java 后端开发。 AI 医疗平台里，如果说最适合先落地的一类能力，我会优先推荐医学知识库问答。 因为它既能发挥大模…...
避坑！用ArcGIS计算格网内耕地比例时，90%的人会忽略的数据连接问题
避坑！用ArcGIS计算格网内耕地比例时，90%的人会忽略的数据连接问题 在土地利用规划、农业资源评估等GIS应用中，计算规则格网内的耕地面积占比是一项基础但关键的操作。许多从业者能够顺利完成渔网创建、耕地提取和分区统计步骤，却在…...
Fast-GitHub架构解析：基于Manifest V3的浏览器扩展网络加速方案
Fast-GitHub架构解析：基于Manifest V3的浏览器扩展网络加速方案 【免费下载链接】Fast-GitHub 国内Github下载很慢，用上了这个插件后，下载速度嗖嗖嗖的~！ 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub 技术架…...
统计显著性骗局
原文：towardsdatascience.com/the-statistical-significance-scam-db904be36714?sourcecollection_archive---------0-----------------------#2024-11-09 深入剖析科学最爱工具的缺陷 https://medium.com/caiparryjones96?sourcepost_page---byline--db904be367…...
SAP SD新手避坑指南：交货工厂和装运点配置错了，小心订单发不出去！
SAP SD配置实战：交货工厂与装运点配置错误的深度排查手册 当销售订单在SAP系统中卡在发货环节时，背后往往隐藏着交货工厂（Plant）与装运点（Shipping Point）的配置逻辑问题。这类错误不仅会导致业务流程中断&…...