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

Clip-path实现按钮流动边框动画

news 2026/3/28 8:20:44

前言

👏Clip-path实现按钮流动边框动画，速速来Get吧~

🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现步骤

  • 添加div标签
<div>苏苏_icon</div>
  • 添加样式

在这里插入图片描述

div {position: relative;width: 220px;height: 64px;line-height: 64px;text-align: center;color: #fff;font-size: 20px;background: #55557f;cursor: pointer;border-radius: 10px;
}
  • 为div添加前后伪元素，为了方便区分，设置前后伪元素的边框颜色不同

在这里插入图片描述

div::after,
div::before {content: "";position: absolute;width: 240px;height: 84px;border: 2px solid #55557f;border-radius: 10px;}
div::before{border: 2px solid orange;
}
  • 修改伪元素的定位位置

在这里插入图片描述

div::after,
div::before{+ left: calc(110px - 120px);+ top: calc(32px - 42px);
}
  • 可以简写为inset

inset属性：用来设置left/right/bottom/top

div::after,
div::before{- left: calc(110px - 120px);- top: calc(32px - 42px);- inset: -10px;
}
  • 为伪元素添加动画效果，实现clip-path的变化

clip-path：clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
inset()定义一个 inset 矩形。

  • 语法：
clip-path: inset(20px 50px 10px 0 round 50px);
  • 解释：

当提供所有四个参数时：
它们表示从参考框向内的顶部、右侧、底部和左侧偏移量，这些偏移量定义了插入矩形边缘的位置。这些参数遵循 margin速记的语法，让您可以为所有四个插图设置一个、两个或四个值。

可选border-radiu参数：
使用 border-radius 速记语法为插入矩形定义圆角

在这里插入图片描述

  • 我们尝试对伪元素设置inset

在这里插入图片描述

div::after,
div::before{+ clip-path: inset(0 0 98% 0);
}

在这里插入图片描述

div::after,
div::before{+ clip-path: inset(0 98% 0 0);
}

在这里插入图片描述

div::after,
div::before{+ clip-path: inset( 98% 0  0 0);
}

在这里插入图片描述

div::after,
div::before{+ clip-path: inset(0  0 0  98% ) ;
}
  • 添加动画

在这里插入图片描述

div::after,
div::before{+ animation: pathRotate 3s infinite linear;
}

@keyframes pathRotate {0%,100% {clip-path: inset(0 0 98% 0);}25% {clip-path: inset(0 98% 0 0);}50% {clip-path: inset(98% 0 0 0);}75% {clip-path: inset(0 0 0 98%);}
}
  • 为后伪元素添加动画延迟，形成视差效果
    在这里插入图片描述

animation-delay：
CSS属性指定从将动画应用到元素到开始执行动画之前等待的时间量。动画可以稍后开始，从开头立即开始，或者立即在动画的中途开始。

正值表示动画应该在经过指定的时间量后开始。默认值0s表示动画应在应用后立即开始。

负值会导致动画立即开始，但会在其循环的中途开始。例如，如果您指定-1s动画延迟时间，则动画将立即开始，但会在动画序列开始 1 秒后开始。如果您为动画延迟指定负值，但起始值是隐式的，则起始值是从动画应用于元素的那一刻起获取的。

div::after {animation-delay: -1.5s;
}
  • 去掉前伪元素的border色值设置

在这里插入图片描述

-div::before {-  border: 2px solid orange;
-}
  • div添加hover事件，就完成啦~

在这里插入图片描述

div:hover {filter: brightness(1.5);
}

div{/* 添加过渡效果 */transition: all 0.5s;
}

3.实现代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>clip-path实现按钮流动边框</title></head><link rel="stylesheet" href="../common.css" /><style>div {position: relative;width: 220px;height: 64px;line-height: 64px;text-align: center;color: #fff;font-size: 20px;background: #55557f;cursor: pointer;border-radius: 10px;/* 添加过渡效果 */transition: all 0.5s;}div::after,div::before {content: "";position: absolute;border: 2px solid #55557f;width: 240px;height: 84px;border-radius: 10px;/* 简写为 */inset: -10px; /* 添加动画 */animation: pathRotate 3s infinite linear;}@keyframes pathRotate {0%,100% {clip-path: inset(0 0 98% 0);}25% {clip-path: inset(0 98% 0 0);}50% {clip-path: inset(98% 0 0 0);}75% {clip-path: inset(0 0 0 98%);}}div::after {animation-delay: -1.5s;}div:hover {filter: brightness(1.5);}</style><body><div>苏苏_icon</div></body>
</html>

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕
更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~

相关文章：

Clip-path实现按钮流动边框动画

前言 &#x1f44f;Clip-path实现按钮流动边框动画&#xff0c;速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现步骤 添加div标签 <div>苏苏_icon</div>添加样式 div {position: relative;width: 220px;height: 6…...

编程日记 2023/2/12 3:56:29

不停服更新应用的方案：蓝绿发布、滚动发布、灰度发布

原文网址&#xff1a;不停服更新应用的方案&#xff1a;蓝绿发布、滚动发布、灰度发布_IT利刃出鞘的博客-CSDN博客 简介 本文介绍不停服更新应用的方案&#xff1a;蓝绿发布、滚动发布、灰度发布。 升级服务器的应用时&#xff0c;要停止掉老版本服务&#xff0c;将程序上传…...

编程日记 2023/2/12 3:54:09

有趣的KaTeX（附源码）

两年半未见&#xff0c;甚是想念 给大家带来有趣的KaTeX\KaTeXKATE​X&#xff0c;可以放在洛谷主页 文章目录1234561 1#include<bits/stdc.h>\texttt{1 \color{orange}\#include <bits/stdc.h>}1 #include <bits/stdc.h> 2usingnamespacestd;\texttt{2 \col…...

编程日记 2023/2/12 3:51:48

Golang map笔记

map定义三种方式package mainimport "fmt"func main() {// map 的基本定义// 第一种方式 使用make分配数据空间var map1 map[string]stringmap1 make(map[string]string, 3)map1["no1"] "北京"map1["no2"] "天津"map1[&q…...

编程日记 2023/2/12 3:50:36

Android Jetpack组件之WorkManager高级概念介绍与使用(三)

一、介绍 通过前面两篇&#xff0c;我们基本掌握了组件的workmanager的接入&#xff0c;以及api的使用等。但是一个框架如果运用在复杂的项目中&#xff0c;肯定需要有其他额外的支持&#xff0c;介绍来我们将会介绍高级概念&#xff0c;以及对前面的知识点进行回顾与拓展。 高…...

编程日记 2023/2/12 3:49:22

Spring框架中用到的设计模式（都用到了哪些设计模式？）

文章目录简单工厂模式&#xff1a;工厂模式&#xff1a;单例模式&#xff1a;原型模式&#xff1a;迭代器模式&#xff1a;代理模式&#xff1a;适配器模式&#xff1a;观察者模式&#xff1a;模板模式&#xff1a;责任链模式&#xff1a;这是一道相对有难度的题目&#xff0c;…...

编程日记 2023/2/12 3:48:09

Python中的类和对象（4）

1. 构造函数 &#xff08;_ init _(self[,……])&#xff09; 在类中定义 _init _() 方法&#xff0c;可以实现在实例化对象的时候进行个性化定制&#xff1a; >>> class C: ... def __init__(self, x, y): ... self.x x ... self.y y ... …...

编程日记 2023/2/12 3:46:57

window11 安装node及配置环境变量

一、安装环境 本教程演示的环境&#xff1a; 系统&#xff1a;win 11 64位 node.js下载地址: http://nodejs.cn/ node.js版本&#xff1a;长期支持版本&#xff08;本教程基于16.15.0&#xff09; 点击选中图标下载到电脑本地即可。 二、安装步骤 1、双击安装包&#xff0c;一…...

编程日记 2023/2/12 3:45:45

腾讯云服务器选购新手教程(新版流程超级详细)

腾讯云服务器购买有两个入口&#xff0c;一个是直接在秒杀活动上购买云服务器&#xff0c;价格便宜&#xff0c;2核2G4M轻量服务器&#xff0c;2核4G6M服务器、4核8G10M服务器&#xff0c;活动上购买价格便宜&#xff0c;但是服务器机型固定&#xff1b;另一个是直接在云服务器…...

编程日记 2023/2/12 3:44:33

第四章 Opencv图像色彩空间与通道

文章目录1.色彩空间1-1.RGB/BGR色彩空间1-2.GRAY色彩空间1-3.HSV色彩空间2.通道2-1.拆分通道&#xff1a;split()方法1.拆BGR色彩空间图像的通道2.拆HSV色彩空间图像的通道2-2.合并通道&#xff1a;merge()方法1.B、G、R 通道的合并2.H、S、V 通道的合并3.B、G、R、A 通道的合并…...

编程日记 2023/2/12 3:42:05

《论文列表》持续更新中......

《论文列表》持续更新中......前言相关论文阅读说服对话系统 Persuasive Dialogue System情感知识对话 Emotional Support Conversation对话中的情感识别 Emotion Recognition in Conversation情感对话生成 Emotional Response Generation多模态融合情感识别或情感生成 Multimo…...

编程日记 2023/2/12 3:38:40

空间中任意一点到球的截面的最短距离

假设球的球心坐标为Oball{x0,y0,z0}O_{ball}\{x_0,y_0,z_0\}Oball​{x0​,y0​,z0​}&#xff0c;球的半径为rrr&#xff0c;球的方程为(x−x0)2(y−y0)2(z−z0)2r2(x-x_0)^2(y-y_0)^2(z-z_0)^2r^2(x−x0​)2(y−y0​)2(z−z0​)2r2球的一截面的方程为AxByCz10AxByCz10AxByCz10…...

编程日记 2023/2/12 3:36:16

麦克斯韦方程场分量公式推导

今天看书的时候遇到了一个关于公式推导的问题，阅读该篇前推荐优先阅读—点乘与叉乘是否满足结合律。 已知： E ⃗ t = i k n 2 (...

编程日记 2023/2/12 3:35:02

freertos学习之路6-任务创建和删除

写在最前 由于工作需要&#xff0c;需要开始学习freertos的相关知识&#xff0c;本专题主要记录freertos的相关内容 参考&#xff1a; https://www.bilibili.com/video/BV19g411p7UT 正点原子视频 1. 简介 和一般的OS不同&#xff08;linux/windows&#xff09;&#xff0c;在…...

编程日记 2023/2/12 3:32:40

科都电气创业板IPO终止：曾计划募资约6亿元，郑春开等学历较低

近日&#xff0c;深圳证券交易所披露的信息显示&#xff0c;科都电气股份有限公司&#xff08;下称“科都电气”&#xff09;提交了撤回首次公开发行股票并在创业板上市申请文件的申请&#xff0c;同时保荐机构撤回对该公司的保荐。 因此&#xff0c;深圳证券交易所决定终止对…...

编程日记 2023/2/12 3:30:16

【MySQL】第十六部分 MySQL数据类型详解

【MySQL】第十六部分 MySQL数据类型详解 文章目录【MySQL】第十六部分 MySQL数据类型详解16. MySQL数据类型详解16.1 整数类型16.2 浮点类型16.3 定点数类型16.4 位类型 BIT16.5 日期和时间类型16.6 文本字符串类型16.6.1 CHAR VS VARCHAR类型16.6.2 TEXT类型16.6.3 ENUM类型16…...

编程日记 2023/2/12 3:29:04

Linux手工创建新用户

准备工作&#xff08;配置流程的理解&#xff09; Linux中useradd命令即一系列文件操作的结合体&#xff0c;所以我们可以通过查看useradd命令来确认我们手工创建新用户需要完成的文件配置 找到man useradd中涉及的文件部分 对于手工创建用户有用的文件&#xff1a; /etc/pas…...

编程日记 2023/2/12 3:25:26

K_A12_003 基于STM32等单片机采集光敏二极管模块参数 串口与OLED0.96双显示

K_A12_003 基于STM32等单片机采集光敏二极管模块参数 串口与OLED0.96双显示一、资源说明二、基本参数参数引脚说明三、驱动说明IIC地址/采集通道选择/时序对应程序:四、部分代码说明1、接线引脚定义1.1、STC89C52RC光敏二极管模块1.2、STM32F103C8T6光敏二极管模块五、基础知识…...

编程日记 2023/2/12 3:24:13

天才少年稚晖君

稚晖君 简介主要成就华为天才少年简介 彭志辉，1993年出生于江西吉安，科技圈知名KOL，人称“稚晖君”“野生钢铁侠”，原华为天才少年。 2015年本科毕业于电子科技大学生命科学与技术学院；2018年研究生毕业于电子科技大学信息与通信工程学院；毕业后就职于OPPO研究院AI实验…...

编程日记 2023/2/12 3:22:59

【Linux command 09】tcpdump 命令

tcp一款sniffer工具&#xff0c;是Linux上的抓包工具&#xff0c;嗅探器语法tcpdump (选项)选项-c&#xff1a; 指定要抓取的包数量。注意&#xff0c;是最终要获取这么多个包。例如&#xff0c;指定"-c 10"将获取10个包&#xff0c;但可能已经处理了100个包&#xf…...

编程日记 2023/2/12 3:21:47

数据治理平台选型，真正应该看哪几件事

上个月&#xff0c;一位在某制造业集团做数据架构的朋友跟我吐槽&#xff1a;“我们花了半年时间选型&#xff0c;最后上线的产品&#xff0c;管元数据的归元数据&#xff0c;管质量的归质量&#xff0c;两个系统之间打不通&#xff0c;数据血缘断在半路上。现在每次出了数据问…...

编程新知 2026/3/28 8:05:41

用 AI 助手清理 Windows C盘缓存：AppData/IDE/AI模型深度分析与安全清理实战

关键词：C盘清理、Windows磁盘优化、AppData缓存、AI工具缓存、VS Code扩展、Hugging Face缓存、Ollama模型清理、WorkBuddy 适用系统：Windows 10 / Windows 11 难度：⭐⭐（适合有基础的开发者） 目录 背景：开发机C盘为何特别容易爆满 环境准备 Step 1：调用AI进行深度磁盘扫…...

编程新知 2026/3/28 7:55:23

Win10 LTSC 1809系统下Docker 4.0.0与CVAT 2.31.0的完美搭配：避坑指南与性能优化

Win10 LTSC 1809系统下Docker 4.0.0与CVAT 2.31.0的完美搭配&#xff1a;避坑指南与性能优化 在工业级计算机视觉标注领域&#xff0c;CVAT&#xff08;Computer Vision Annotation Tool&#xff09;凭借其开源特性和强大的标注功能&#xff0c;已成为许多研究团队的首选工具。…...

编程新知 2026/3/28 7:31:17

一文读懂水面无人艇：每个硬件模块到底负责什么

目录 一、水面无人艇完整系统 二、硬件搭配负责哪些功能 2.1 艇体模块&#xff1a;决定“能不能稳、能不能装、能不能扛风浪” 2.2 动力与航行执行模块&#xff1a;决定“怎么动” 2.3 导航传感器模块&#xff1a;决定“我现在在哪、朝哪、跑多快” 1&#xff09;GPS / 北…...

编程新知 2026/3/28 7:06:54

RViz实战：如何用C++在ROS中动态切换不同形状的物体（含避坑指南）

RViz实战&#xff1a;如何用C在ROS中动态切换不同形状的物体&#xff08;含避坑指南&#xff09; 在机器人开发过程中&#xff0c;RViz作为ROS生态中的三维可视化利器&#xff0c;其核心价值在于让抽象的数据变得直观可见。而Marker消息系统则是实现这种可视化的关键桥梁——它…...

编程新知 2026/3/28 6:38:48

Qwen2.5-VL-3B视频识别实战：从环境搭建到显存优化的踩坑记录

Qwen2.5-VL-3B视频识别实战&#xff1a;从环境搭建到显存优化的全流程指南 当开发者第一次尝试用Qwen2.5-VL-3B处理视频内容时&#xff0c;往往会遇到各种预料之外的挑战。从依赖包缺失到显存爆炸&#xff0c;从环境配置到参数调试&#xff0c;每一步都可能成为阻碍项目推进的绊…...

编程新知 2026/3/28 6:08:28

ESFT-gate-summary-lite：AI快速提炼文本关键信息

ESFT-gate-summary-lite&#xff1a;AI快速提炼文本关键信息 【免费下载链接】ESFT-gate-summary-lite ESFT-gate-summary-lite模型&#xff0c;基于DeepSeek-ai的开源项目&#xff0c;专注于提升基础模型摘要能力。源自ESFT-vanilla-lite&#xff0c;强化文本摘要&#xff0c;…...

编程新知 2026/3/28 4:19:55

【STM32F4系列】【HAL库】【实战解析】MPU6050 DMP姿态解算与I2C通信优化

1. MPU6050与DMP库基础解析 第一次接触MPU6050时&#xff0c;我被它小巧的体积和强大的功能震撼到了。这个售价不到10元的芯片&#xff0c;居然能同时测量三轴角加速度和三轴线加速度。在实际项目中&#xff0c;我发现直接读取原始数据并不难&#xff0c;但要想获得稳定的姿态信…...

编程新知 2026/3/28 3:51:48

量子行走：从理论到Python实现——3. 量子门、电路与编程基础

目录 3. 量子门、电路与编程基础 3.1 单量子比特门 3.1.1 泡利门与旋转门 3.1.2 哈达玛门与相位门 3.2 多量子比特门 3.2.1 受控门 3.2.2 纠缠门与SWAP操作 3.3 量子电路构建与优化 3.3.1 电路表示与DAG结构 3.3.2 变分电路 3. 量子门、电路与编程基础 量子计算体系的…...

编程新知 2026/3/28 3:17:14

极简安装方案：树莓派部署OpenClaw轻量版对接云端Qwen3-32B

极简安装方案&#xff1a;树莓派部署OpenClaw轻量版对接云端Qwen3-32B 1. 为什么选择树莓派OpenClaw轻量版&#xff1f; 去年夏天&#xff0c;我突发奇想&#xff1a;能不能用树莓派做个24小时在线的AI管家&#xff1f;既能控制智能家居&#xff0c;又能处理简单办公任务。但…...

编程新知 2026/3/28 2:30:53