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

CSS按钮-跑马灯边框

news 2026/3/26 13:06:11

请添加图片描述

思路很简单，实现方法有很多很多。但是大体思路与实现方法都类似：渐变色 + 动画，主要区别在动画的具体实现

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…...

编程日记 2023/8/30 13:48:11

【PCIE系统学习】Gen1/2Gen3/4 symobl与OrderSet概念对比

这个专栏要干的事：学习PCIE理论知识，学会PCIE IP/VIP的使用。可以达到上手做项目，而不是空有理论适合谁看：正在学习PCIE 设计验证，但学的过于零散。想有对比的系统的学习。低价收费的目的：抵制胡乱传播转载现象。版本控制：便于增加内容以及勘误版本说明v20230829 …...

编程日记 2023/8/30 13:47:11

C++ Qt 中QMimeDatabase类详细介绍以及应用场景

C Qt 中QMimeDatabase类详细介绍以及应用场景文章目录 C Qt 中QMimeDatabase类详细介绍以及应用场景一、QMimeDatabase类是什么？二、QMimeDatabase类中的关键功能和特点三、QMimeDatabase的用法四、QMimeDatabase的应用场景一、QMimeDatabase类是什么？…...

编程日记 2023/8/30 13:46:09

深度学习7:生成对抗网络 – Generative Adversarial Networks | GAN

生成对抗网络 – GAN 是最近2年很热门的一种无监督算法，他能生成出非常逼真的照片，图像甚至视频。我们手机里的照片处理软件中就会使用到它。目录生成对抗网络 GAN 的基本原理大白话版本非大白话版本第一阶段：固定「判别器D」&#x…...

编程日记 2023/8/30 13:45:08

R语言空气污染数据的地理空间可视化和分析：颗粒物2.5（PM2.5）和空气质量指数（AQI）...

原文链接：http://tecdat.cn/?p23800 由于空气污染对公众健康的不利影响，人们一直非常关注。世界各国的环境部门都通过各种方法（例如地面观测网络）来监测和评估空气污染问题（点击文末“阅读原文”获取完整代码数据&…...

编程日记 2023/8/30 13:44:07

实现excel导出最简单方式

今天来记录一下导出excel的实现方式，导出的格式是xlsx的文件。这里用到的是hutool的工具包，依赖如下： <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.5&…...

编程日记 2023/8/30 13:43:06

【每日一题Day310】LC1654到家的最少跳跃次数 | BFS

到家的最少跳跃次数【LC1654】有一只跳蚤的家在数轴上的位置 x 处。请你帮助它从位置 0 出发，到达它的家。跳蚤跳跃的规则如下： 它可以往前跳恰好 a 个位置（即往右跳）。它可以往后跳恰好 b 个位置（即往左跳&…...

编程日记 2023/8/30 13:42:05

[Android AIDL] --- AIDL原理简析

上一篇文章已经讲述了如何在Android studio中搭建基于aidl的cs模型框架，只是用起来了，这次对aidl及cs端如何调用的原理进行简单分析 1 创建AIDL文件 AIDL 文件可以分为两类。一类是用来定义接口方法，声明要暴露哪些接口给客户端调用&#…...

编程日记 2023/8/30 13:41:04

企业的固定资产管理怎么操作

一家拥有多台大型设备的工厂，这些设备需要定期进行保养和维护，以确保其正常运转。而企业内部员工由于专业知识和技能的不同，需要分工协作才能更好地完成各项工作任务。因此，在设备资产管理方面，如何实现高效、便捷、透…...

编程日记 2023/8/30 13:40:02

Rust 进阶学习

Rust 进阶学习文章目录 Rust 进阶学习所有权作用域移动和克隆涉及函数的所有权机制涉及参数的所有权涉及返回值的所有权引用和租借可变引用枚举类枚举成员的属性枚举匹配结构体结构体方法结构体关联函数错误处理不可恢复错误可恢复错误 Rust代码组织管理Module默认的Modul…...

编程日记 2023/8/30 13:39:00

保护网站安全：学习蓝莲花的安装和使用，复现跨站脚本攻击漏洞及XSS接收平台

这篇文章旨在用于网络安全学习，请勿进行任何非法行为，否则后果自负。环境准备一、XSS基础 1、反射型XSS 攻击介绍原理攻击者通过向目标网站提交包含恶意脚本的请求，然后将该恶意脚本注入到响应页面中，使其他用户在查看…...

编程日记 2023/8/30 13:37:57

Redis——如何解决redis穿透、雪崩、击穿问题

目录一、查询商品信息的常规代码示例二、缓存击穿2.1、缓存击穿的理解2.2、缓存击穿的解决方案2.3、解决缓存击穿的代码示例三、缓存雪崩3.1、缓存雪崩的理解3.2、缓存雪崩的解决方案3.2.1、缓存集中过期的情况3.2.2、缓存服务器宕机的情况3.2.3、缓存服务器断电的情况 3.3、…...

编程日记 2023/8/30 13:36:55

MySQL一行记录是如何存储的？

目录 MySQL的数据存放在哪个文件？ 表空间文件的结构是怎么样的？ 1、行（row） 2、页（page） 3、区（extent） 4、段（segment） InnoDB 行格式有哪些&#xf…...

编程日记 2023/8/30 13:35:54

shrinkTreeNode () {// 改变一个全局变量this.treeStatus !this.treeStatus;// 改变每个节点的状态this.changeTreeNodeStatus(this.$refs.attrList.store.root); },// 改变节点的状态 changeTreeNodeStatus (node) {node.expanded this.treeStatus;for (let i 0; i < no…...

编程日记 2023/8/30 13:34:53

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…...

编程日记 2023/8/30 13:33:52

斐波那契1（矩阵快速幂加速递推，斐波那契前n项平方和）

链接：登录—专业IT笔试面试备考平台_牛客网来源：牛客网 Keven 特别喜欢斐波那契数列，已知 fib11fib_11fib11，fib21fib_21fib21，对于 n>3n>3n>3，fibnfibn−2fibn−1fib_{n}fib_{n-2}fib_{n…...

编程日记 2023/8/30 13:32:50

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…...

编程日记 2023/8/30 13:31:47

从零开始学习 Java：简单易懂的入门指南之查找算法及排序算法（二十）

查找算法及排序算法常见的七种查找算法：1. 基本查找2. 二分查找3. 插值查找4. 斐波那契查找5. 分块查找6. 哈希查找7. 树表查找四种排序算法：1. 冒泡排序1.1 算法步骤1.2 动图演示1.3 代码示例 2. 选择排序2.1 算法步骤2.2 动图演示 3. 插入排序3.1 算…...

编程日记 2023/8/30 13:30:46

非煤矿山风险监测预警算法 yolov8

非煤矿山风险监测预警算法通过yolov8网络模型深度学习算法框架，非煤矿山风险监测预警算法在煤矿关键地点安装摄像机等设备利用智能化视频识别技术，能够实时分析人员出入井口的情况，人数变化并检测作业状态。YOLO的结构非常简单，就…...

编程日记 2023/8/30 13:29:45

Ansible学习笔记（一）

1.什么是Ansible 官方网站：https://docs.ansible.com/ansible/latest/installation_guide/intro_installation.html Ansible是一个配置管理和配置工具，类似于Chef，Puppet或Salt。这是一款很简单也很容易入门的部署工具，它使用SS…...

编程日记 2023/8/30 13:28:44

Stable Diffusion炼丹指南：从Classifier Guidance到Classifier-Free Guidance，一文搞懂两种主流引导方式的区别与实战选择

Stable Diffusion条件生成实战：Classifier Guidance与Classifier-Free Guidance深度解析在AIGC技术爆发的今天，Stable Diffusion等开源模型已成为内容创作的重要工具。但当你需要精确控制生成结果时——比如指定生成"穿红色连衣裙的亚洲女性"…...

编程新知 2026/3/26 12:48:40

用 AI 生成视频？试试 Hailuo 视频生成 API！

在现代数字时代，视频内容的需求不断增长，而制作高质量视频的门槛也随之降低。今天，我想和大家分享一个强大的工具——Ace Data Cloud Hailuo 视频生成 API。这款 API 不仅支持文本转语音、多个声音切换和情感调整，还能为你提供清晰…...

编程新知 2026/3/26 12:48:40

10BASE-T1S PLCA参数配置避坑指南：从Node ID重复到Burst Timer设置，这些坑你踩过几个？

10BASE-T1S PLCA参数配置避坑指南：从Node ID重复到Burst Timer设置，这些坑你踩过几个？ 在车载以太网的实际部署中，10BASE-T1S因其单对线缆实现多节点通信的特性，正逐渐成为智能座舱和传感器网络的热门选择。但当我们真…...

编程新知 2026/3/26 12:42:39

Zotero Reference插件：让PDF文献管理效率提升70%的实用指南

Zotero Reference插件：让PDF文献管理效率提升70%的实用指南【免费下载链接】zotero-reference PDF references add-on for Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-reference 一、价值定位：重新定义学术文献处理方式认识…...

编程新知 2026/3/26 10:45:26