css:clip元素裁剪实现Loading加载效果边框

clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。

警告: 这个属性已被废弃。建议使用 clip-path

文档

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

目录

    • 语法
    • 截取各个边框
    • 实现Loading加载效果边框
    • 参考文章

语法

/* 标准语法 */
clip: rect(<top>, <right>, <bottom>, <left>);/* 向后兼容语法 */
clip: rect(<top> <right> <bottom> <left>);   /* 默认值。不应用任何剪裁 */
clip: auto;/* 从父元素继承 clip 属性的值 */
clip: inherit;
  • top 和 bottom 指定相对于盒子上边框边界 的偏移
  • right 和 left 指定了相对于盒子左边框边界 的偏移

截取各个边框

在这里插入图片描述
实现代码

<style>.box-wrap {display: flex;column-gap: 20px;}.box {position: relative;height: 200px;width: 200px;background-color: green;color: #fff;font-size: 24px;text-align: center;line-height: 200px;}.box::before {content: "";position: absolute;left: 0;top: 0;right: 0;bottom: 0;border: 2px solid #cd0000;}.box-top::before {/* 上边框 */clip: rect(0 200px 2px 0);}.box-bottom::before {/* 下边框 */clip: rect(198px, 200px, 200px, 0);}.box-left::before {/* 左边框 */clip: rect(0, 2px, 200px, 0);}.box-right::before {/* 右边框 */clip: rect(0, 200px, 200px, 198px);}
</style><div class="box-wrap"><div class="box">box</div><div class="box box-top">box-top</div><div class="box box-bottom">box-bottom</div><div class="box box-left">box-left</div><div class="box box-right">box-right</div>
</div>

实现Loading加载效果边框

在这里插入图片描述

实现代码

<style>.box {position: relative;height: 200px;width: 200px;background-color: green;color: #fff;font-size: 24px;text-align: center;line-height: 200px;}.box::before {content: "";position: absolute;left: 0;top: 0;right: 0;bottom: 0;border: 2px solid #cd0000;animation: borderAround 1.5s infinite linear;}@keyframes borderAround {0%,100% {clip: rect(0 200px 2px 0);}25% {clip: rect(0, 200px, 200px, 198px);}50% {clip: rect(198px, 200px, 200px, 0);}75% {clip: rect(0, 2px, 200px, 0);}}
</style><div class="box">box</div>

演示地址:https://mouday.github.io/front-end-demo/clip-path/loading.html

参考文章

  1. CSS实线边框loading动画实例页面

  2. CSS3/SVG clip-path路径剪裁遮罩属性简介

  3. 菜鸟教程 - CSS clip 属性

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

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

相关文章

liunx系统目录结构

列出目录 ls -l bin 二进制文件 boot 启动liunx的一些核心文件 dev 外部设备liunx的 etc 存放系统管理的配置文件和子目录都在这里面 home 家目录 lib 动态链接库 windows中的dll lostfound 一般为空 非法关机 存放文件 media 自带识别设备 识别挂载…

Linux安装MySQL8.0服务

Linux安装MySQL8.0服务 文章目录 Linux安装MySQL8.0服务一、卸载1.1 查看mariadb1.2 卸载 二、安装2.1 下载2.2 上传2.3 解压2.4 重命名2.5 删除2.6 创建目录2.7 环境变量2.8 修改配置2.9 配置文件2.9 用户与用户组2.10 初始化2.11 其它 三、开启远程连接MySQL 一、卸载 首先第…

安卓常见设计模式10------责任链模式(Kotlin版)

1. W1 是什么&#xff0c;什么是责任链模式&#xff1f;​ 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它用于将请求的发送者和接收者解耦&#xff0c;并将请求沿着一个处理链进行传递&#xff0c;直到有一个处理者能…

Hive 知识点八股文记录 ——(二)优化

函数 UDF&#xff1a;用户定义函数 UDAF&#xff1a;用户定义聚集函数 UDTF&#xff1a;用户定义表生成函数 建表优化 分区建桶 创建表时指定分区字段 PARTITIONED BY (date string)指定分桶字段和数量 CLUSTERED BY (id) INTO 10 BUCKETS插入数据按分区、分桶字段插入 …

【数据结构】树与二叉树(八):二叉树的中序遍历(非递归算法NIO)

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…

【postgresql】CentOS7 安装pgAdmin 4

CentOS7 安装PostgreSQL Web管理工具pgAdmin 4。 pgAdmin 是世界上最先进的开源数据库 PostgreSQL 最受欢迎且功能丰富的开源管理和开发平台。 下载地址&#xff1a; pgadmin-4 download pgAdmin 4分为桌面版和服务器版。 我们这里部署服务器版本。 安装RPM包。 安装源 s…

现在学编程还能够月薪过万吗?

当我们谈到职业选择时&#xff0c;一项常受人关注的问题是&#xff0c;现在学编程还能月薪过万吗&#xff1f;这似乎是一个不断挂在年轻人嘴边的问题&#xff0c;尤其是在数字化时代&#xff0c;编程的需求越来越大。 所以今天让我们一起探讨这个问题&#xff0c;看看现实生活…

聊聊logback的ShutdownHook

序 本文主要研究一下logback的ShutdownHook ShutdownHook ch/qos/logback/core/hook/ShutdownHook.java /*** Interface describing a logback shutdown hook implementation* * author Mike Reinhold*/ public interface ShutdownHook extends Runnable, ContextAware { }…

汽车标定技术(九)--标定常量与#pragma的趣事

目录 1. 不添加#pragma语句 2. 添加#pragma语句 3. 标定量只给flash空间&#xff0c;不给ram指定空间 4. 总结 在之前不会使用overlay机制的时候&#xff0c;我们想要做汽车标定&#xff0c;标定常量编译出来的地址一般都应该是ram的地址&#xff0c;而且在链接文件中都会指…

6.5对称二叉树(LC101-E)

算法&#xff1a; 其实就是比较左右子树是否可以翻转 比较的时候&#xff1a; 比较外面的节点是否相等&#xff0c;如示例1中的节点3 比较里面的节点是否相等&#xff0c;如示例1中的节点4 基本思路是这样的&#xff0c;那怎么遍历呢&#xff1f; 二叉树的题一定要掌握到…

更安全的ssh协议与Gui图形化界面使用

目录 前言&#xff1a; 一.Gui图形化界面的使用 二.ssh协议 SSH的主要作用包括&#xff1a; 相比其他网络协议&#xff0c;SSH的优势包括&#xff1a; 三.idea集成Git 前言&#xff1a; 上一篇讲解了git的命令用法以及https协议&#xff0c;但是这个协议放在做团队项目的…

Git系列之Git集成开发工具及git扩展使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Git实战开发》。&#x1f3af;&#x1f3af; &a…

我的月光宝盒初体验失败了

哈哈哈&#xff0c;我爱docker, docker 使我自由&#xff01;&#xff01;&#xff01; docker make me free! 菠萝菠萝蜜口号喊起来。 https://github.com/vivo/MoonBox/ windows上安装好了docker之后&#xff0c;docker-compose是自带的。 docker-compose -f docker-compo…

Springboot整合Jedis实现单机版或哨兵版可切换配置

Springboot整合Jedis实现单机版或哨兵版可切换配置 前言实现最后 前言 前文写到借助redis实现Shiro实现session限制登录数量踢人下线&#xff0c;本文就写一下Jedis的配置&#xff0c;可切换单机版和集群哨兵版&#xff0c;方便开发测试。 实现 很简单&#xff0c;直接上代码&…

王学岗visibility改变后调用onLayout()

自定义控件的时候发现了一个bug。 Button位移动画执行结束后我设置了一个不相关的TextView的可见性由gone变为visible.令人郁闷的是&#xff0c;只要我注释的地方放开。动画执行结束后button都会重新绘制在位移动画开始的位置。注释掉这段代码就正常。 经过分析后得知 View的Vi…

C# OpenCvSharp DNN HybridNets 同时处理车辆检测、可驾驶区域分割、车道线分割

效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Dnn; using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Numerics; using System.Text; using System.Windows.Forms;namespace OpenCvSharp_D…

城市内涝积水的原因有哪些?万宾科技内涝积水监测仪工作原理

一旦有暴雨预警出现多地便会立即响应&#xff0c;以防城市内涝问题出现。随着人口迁移&#xff0c;越来越多的人口涌入城市之中&#xff0c;为了完善城市基础设施建设&#xff0c;城市应急管理部门对内涝的监测越来越严格&#xff0c;在信息化时代&#xff0c;城市管理也趋向于…

G2406C是一款高效的直流-直流降压开关稳压器,能够提供高达1A输出电流。

G2406C 1.5MHz&#xff0c;1A高效降压DC-DC转换器 概述: G2406C是一款高效的直流-直流降压开关稳压器&#xff0c;能够提供高达1A输出电流。G2406C在2.7V至5.5V的宽范围输入电压下工作&#xff0c;使IC是低压电源转换的理想选择。在1.5MHz的固定频率下运行允许使用具有小电感…

【C++】异常 智能指针

C异常 & 智能指针 1.C异常1.1.异常的抛出与捕获1.2.异常体系1.3.异常安全与规范1.4.异常优缺点 2.智能指针2.1.RAII2.2.智能指针的使用及原理2.2.1.auto_ptr2.2.2.unique_ptr2.2.3.shared_ptr2.2.4.shared_ptr的循环引用问题 & weak_ptr 2.3.定制删除器 1.C异常 C异常…

百度智能云千帆大模型平台再升级,SDK版本开源发布!

SDK 前言一、SDK的优势二、千帆SDK&#xff1a;快速落地LLM应用三、如何快速上手千帆SDK1、SDK快速启动快速安装平台鉴权如何获取AK/SK以“Chat 对话”为调用示例 2. SDK进阶指引3. 通过Langchain接入千帆SDK为什么选择Langchain 开源社区 前言 百度智能云千帆大模型平台再次升…