前端 CSS 经典:旋转边框效果

效果:

思路:使用伪元素,给伪元素设置背景色,然后定位,遮盖,旋转。就可以实现旋转边框效果。 

实现代码: 

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}button {margin: 50px 40%;width: 200px;height: 80px;color: #fff;font-size: 24px;background: #000;border: none;outline: none;z-index: 1;border-radius: 10px;cursor: pointer;position: relative;overflow: hidden;}button::before {content: "";width: 200px;height: 200px;position: absolute;background: orange;z-index: -2;left: 50%;top: 50%;transform-origin: left top;animation: rotating 2s linear infinite;}button::after {content: "";position: absolute;--g: 4px;width: calc(100% - var(--g) * 2);height: calc(100% - var(--g) * 2);background: #000;left: var(--g);top: var(--g);border-radius: inherit;z-index: -1;}@keyframes rotating {to {transform: rotate(360deg);}}</style></head><body><button>按钮</button><script></script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/31780.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker in docker 在CI中应用解析

docker in docker 简介 docker里嵌套运行docker&#xff0c;本文讲解其在jenkins和gitlab-runner 种的调用流程 一、用于jenkins 容器化部署jenkins时调用docker命令集成CI功能 [rootops-demo~]# docker inspect jenkins --format"{{json .Mounts}}" [{"T…

电子竞赛1——基于DDS的AM信号发生器

课题要求 产生AM调幅波&#xff1b; 要求&#xff1a;载波10K&#xff0c;被调制波1K&#xff1b; 短按键1&#xff08;pin_143&#xff09;改变该调幅波的调制度&#xff1a;25%、50%、75%&#xff1b; 长按按键1&#xff08;pin_143&#xff09;改变被调制信号频率&#…

STM32通过SPI软件读写W25Q64

文章目录 1. W25Q64 2. 硬件电路 3. W25Q64框架图 4. 软件/硬件波形对比 5. 代码实现 5.1 MyI2C.c 5.2 MyI2C.h 5.3 W25Q64.c 5.4 W25Q64.h 5.5 W25Q64_Ins.h 5.6 main.c 1. W25Q64 对于SPI通信和W25Q64的详细解析可以看下面这篇文章 STM32单片机SPI通信详解-CSDN博…

工作实践:11种API性能优化方法

一、索引优化 接口性能优化时&#xff0c;大家第一个想到的通常是&#xff1a;优化索引。 确实&#xff0c;优化索引的成本是最小的。 你可以通过查看线上日志或监控报告&#xff0c;发现某个接口使用的某条SQL语句耗时较长。 此时&#xff0c;你可能会有以下疑问&#xff…

Web渗透:XSS-DOM-based XSS

DOM-based XSS&#xff08;基于DOM的跨站脚本攻击&#xff09;是一种XSS攻击类型&#xff0c;其特点是恶意脚本通过操作文档对象模型&#xff08;DOM&#xff09;直接在客户端执行&#xff0c;而无需经过服务器的处理。这种攻击主要利用客户端JavaScript代码中的漏洞&#xff0…

BP神经网络-入门到理解-长文讲述

本文来自&#xff1a;老饼讲解-BP神经网络 https://www.bbbdata.com 目录 一、BP神经网络的仿生意义 二、BP神经网络的结构 三、BP神经网络的前馈与后馈 3.1 BP神经网络的前馈 3.2 什么是BP神经网络的后馈 四、BP神经网络的训练 4.1 BP神经网络归一化 4.2 梯度下降算法…

完胜PSP的神器

小鸡模拟器&#xff0c;顾名思义&#xff0c;它是一个能够模拟多种经典游戏平台的软件&#xff0c;从家用游戏机到掌上游戏机&#xff0c;几乎覆盖了所有知名的老式游戏设备。这意味着&#xff0c;通过小鸡模拟器&#xff0c;我们可以在手机上重温那些陪伴我们度过童年时光的经…

springboot学习-图灵课堂-最详细学习

springboot-repeat springBoot学习代码说明为什么java -jar springJar包后项目就可以启动 配置文件介绍 springBoot学习 依赖引入 <properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.target>8</mav…

【教程】PVE下uhd630核显直通HDMI输出 以NUC9为例村雨Murasame

大家好&#xff0c;村雨本雨又来发教程了 最近在搞小主机&#xff0c;之前hp400g3仅仅200多元成功核显直通HDMI&#xff0c;作为简单NAS、解码机、伺服机、中控都非常棒&#xff0c;待机仅9w 村雨Murasame&#xff1a;【教程】7代核显直通HDMI成功输出画面 PVE下7代intel核显…

数仓中数据分层的标准流向解读

在大数据开发中&#xff0c;数据分层是一个至关重要的概念。合理的数据分层可以有效地提升数据处理的效率和质量。本文将详细介绍数据分层的标准流向和相关注意事项&#xff0c;并结合实际应用进行说明。 数据分层的标准流向 根据行业标准&#xff0c;数据分层的标准流向如下…

IOS开发学习日记(十五)

目录 App启动过程及生命周期 App的启动 UIApplication UIApplicationDelegate 通过App生命周期回调实现启动页 闪屏的实现 简单实现闪屏功能 App启动过程及生命周期 App的启动 main函数前 动态链接 / 二进制文件加载 / runtime / 类的加载 ...... main函数 int main(int…

事件驱动架构详解:触发与响应构建高效系统

目录 前言1. 事件驱动架构概述1.1 什么是事件1.2 事件驱动架构的核心概念 2. 事件驱动架构的实现2.1 基于消息队列的实现2.2 基于发布-订阅模式的实现2.3 基于流处理的实现 3. 事件驱动架构的优势3.1 松耦合性3.2 可扩展性3.3 异步处理3.4 灵活性 4. 事件驱动架构的应用场景4.1…

镜像发布至dockerHub

1、login 没有账号的话去注册一个 https://hub.docker.com docker login 输入账号密码和账号2、修改镜像名格式 可以直接招我的修改 格式为你的 hub名/镜像名 3、推送

svm和决策树基本知识以及模型评价以及模型保存

svm和决策树基本知识以及模型评价以及模型保存 文章目录 一、SVM1.1&#xff0c;常用属性函数 二、决策树2.1&#xff0c;常用属性函数2.2&#xff0c;决策树可视化2.3&#xff0c;决策树解释 3&#xff0c;模型评价3.1&#xff0c;方面一&#xff08;评价指标&#xff09;3.2&…

Android基于MediaBroswerService的App实现概述

mSession.setPlaybackState(mStateBuilder.build()); // 5. 关联 SessionToken setSessionToken(mSession.getSessionToken()); } } 根据包名做权限判断之后&#xff0c;返回根路径 Override public BrowserRoot onGetRoot(String clientPackageName, int clientUid, Bundl…

如何生成protobuf文件

背景 protobuf是一种用于序列化结构数据的工具&#xff0c;实现数据的存储与交换&#xff0c;与编程语言和开发平台无关。 序列化&#xff1a;将结构数据或者对象转换成能够用于存储和传输的格式。 反序列化&#xff1a;在其他的计算环境中&#xff0c;将序列化后的数据还原为…

Vue3.4新增的defineModel的使用

define-model的作用 在3.3及之前的版本&#xff0c;父子组件之间的通讯&#xff0c;一直都是靠props&#xff08;父传子&#xff09;和emit&#xff08;子传父&#xff09;来实现。而define-model整合了这两种方法&#xff0c;只需要在父组件中定义define-model的方法&#xf…

GIT回滚

1. 使用 git revert git revert 命令会创建一个新的提交&#xff0c;这个提交会撤销指定提交的更改。这通常用于公共分支&#xff08;如 main 或 master&#xff09;&#xff0c;因为它不会重写历史。 git revert HEAD # 撤销最近的提交 # 或者指定一个特定的提交哈希值 …

Net开源项目推荐-WPF控件样式篇

Net开源项目推荐-WPF控件样式篇 HandyControlWPFDeveloperswpf-uidesignLive-ChartsAvalonDock HandyControl WPF控件库,比较常用的WPF开源控件库&#xff0c;对WPF原有控件样式都进行了重写和扩展&#xff0c;也增加了许多特别的控件&#xff0c;非常好用 github仓库&#x…

Day14—基于Langchain-chatchat搭建本地智能

一、基于Langchain-chatchat搭建本地智能 知识问答系统 1、项目介绍 基于 ChatGLM 等大语言模型与 Langchain 等应用框架实现&#xff0c;开一种利用 langchain 思想实现的基于本地知识库的问答应用&#xff0c;目标期望建立一套对中文场景与开源模型支持友好、可离线运行的知…