前端 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核显…

对象引用和对象赋值的区别

这两段代码的输出不同是因为对象引用和对象赋值的区别。 第一段代码&#xff1a; var controlPoints [{ x: 100, y: 200 }]; let obj null;controlPoints.forEach(item > {obj item; });obj.x 300; obj.y 500;controlPoints[0];第二段代码&#xff1a; var controlP…

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

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

IOS开发学习日记(十五)

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

数据结构-线性表的顺序表示

目录 前言一、线性表1.1 线性表的概念1.2 线性表的逻辑特征 二、线性表的抽象数据类型三、线性表的顺序表示和实现3.1 线性表的顺序表示3.2 基本操作的实现 总结 前言 本篇文章介绍线性表的基本概念&#xff0c;并使用顺序存储结构实现线性表。 本篇文章使用的程序设计语言为C…

使用ANSI转义序列设置终端文本颜色

在使用ANSI转义序列设置终端文本颜色时&#xff0c;背景颜色和文本&#xff08;前景&#xff09;颜色的区分主要通过不同的ANSI代码来实现。ANSI转义序列使用格式为\033[代码m的结构&#xff0c;其中\033是转义字符&#xff08;等同于\e&#xff09;&#xff0c;m指示颜色设置的…

Python with MATLAB

Python with MATLAB 原文&#xff1a;Python with MATLAB - 知乎 (zhihu.com) 我问来自俄罗斯的实习生&#xff0c;你对网上争辩MATLAB和Python谁好谁坏有什么看法。实习生表示他不会Python&#xff0c;但是只要能完成老板布置的工作&#xff0c;哪个语言都无所谓。再说了&am…

c#调用c++生成的dll,c++端使用opencv, c#端使用OpenCvSharp, 返回一张图像

c代码&#xff1a; // OpenCVImageLibrary.cpp #include <opencv2/opencv.hpp> #include <vector> extern "C" { __declspec(dllexport) unsigned char* ReadImageToBGR(const char* filePath, int* width, int* height, int* step) { cv::Mat i…

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

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

【深度学习】记录为什么没有调用GPU

排查CLIP为什么评测推理没有调用GPU&#xff0c;主要是这个代码&#xff1a;https://github.com/OFA-Sys/Chinese-CLIP/blob/master/cn_clip/eval/extract_features.py 第一次认为&#xff1a;因为model并没有to.cuda()。 但是又发现&#xff0c;model.cuda(args.gpu) # 已经加…

机器学习常见知识点 3:Boosting集成学习技术和XGB、LGB

文章目录 1、Boosting 的工作原理常见的 Boosting 算法优点和缺点如何进行加权投票 2、XGB1. XGBoost中的梯度提升2. 目标函数3. 树的构建与优化4. 处理缺失值与特征重要性 3、LGB核心特征1. 基于直方图的决策树学习2. 叶子优先策略3. 处理类别特征4. 缺失值处理 工作原理数据预…

镜像发布至dockerHub

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