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…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...