clip实现圆环环绕效果

最新推荐文章于 2022-05-01 18:01:38 发布
最新推荐文章于 2022-05-01 18:01:38 发布
阅读量1k 收藏 2
点赞数
分类专栏： # css web 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43387852/article/details/117924220
版权
web 同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

    最近遇到一个需求，需要实现一个圆形环绕效果，通过查阅相关资料，打算通过clip来实现圆环环绕的效果

1. Cliip

首先查看clip的定义：
在这里插入图片描述
在这里插入图片描述
通过定义来理解可能还是有点困难，下面通过几个例子可以快速帮你理解Clip的用法。

2.Clip实例

    首先通过下列代码创建一个矩形框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				position: absolute;
				border: 1px solid black;
				top: 200px;
				left: 200px;
				width: 200px;
				height: 200px;
			}
			.clips{
				background-color: red;
				position: absolute;
				width: 200px;
				height: 200px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="clips"></div>
		</div>
	</body>
</html>

效果如下：在这里插入图片描述
然后通过clip裁剪矩形，使其显示左上角区域的矩形,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				position: absolute;
				border: 1px solid black;
				top: 200px;
				left: 200px;
				width: 200px;
				height: 200px;
			}
			.clips{
				background-color: red;
				position: absolute;
				width: 200px;
				height: 200px;
				border: 1px solid black;
				clip: rect(0px,100px,100px,0px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="clips"></div>
		</div>
	</body>
</html>

效果如下:
在这里插入图片描述
我们现在来分析一下这个clip: rect(0px,100px,100px,0px);弄清了这个也就可以弄清clip裁剪图形显示圆环的原理了。根据定义rect的参数分别为top,right,bottom,left四个，则可以理解为clip根据这四个参数确定的矩形进行裁剪图形，而这四个参数所确定的矩形正如图上所示的红色区域。如何确定裁剪区域能，很简单，top和bottom确定的是距离顶部和底部距离，则可以看成两个平行于x轴的直线，对于left和right则可以看成平行于y轴的直线，则这四条直线相交确定的矩形区域就是裁剪区域。根据这个道理，我想聪明的你因该知道如果要裁剪右上角则rect该怎么写吧
clip:rect(0px,200px,100px,100px)同理对于右下角clip:rect(100px,200px,200px,100px)，左下角clip:rect(100px,100px,0x,0px).

3.绘制圆环以及环绕效果

    现在我们知道了clip的用法了，那怎么实现圆环或圆形流线效果呢，很简单只需要对圆形进行裁剪就可以了.
    1. 首先如何绘制一个圆形区域，很简单通过border-radius属性即可。来上代码.

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				position: absolute;
				top: 200px;
				left: 200px;
				width: 200px;
				height: 200px;
			}
			.clips{
				background-color: red;
				position: absolute;
				width: 200px;
				height: 200px;
				border: 2px solid black;
				border-radius: 50%;
				clip:rect(0px,220px,100px,100px)

			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="clips"></div>
		</div>
	</body>
</html>

效果如图所示：
在这里插入图片描述
这是裁剪了右上角的区域，显示的1/4个圆。完整的未裁剪的形状如图下所示；
在这里插入图片描述
那么，如何显示圆环环绕效果呢，首先去除背景颜色，加载单独的边框线条.然后旋转裁剪矩形，这样裁剪区域的轨迹就是一个圆形.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				position: absolute;
				top: 200px;
				left: 200px;
				width: 200px;
				height: 200px;
			}
			.clips{
				position: absolute;
				width: 200px;
				height: 200px;
				border: 2px solid black;
				border-radius: 50%;
				clip:rect(0px,220px,100px,100px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="clips"></div>
		</div>
	</body>
	<script>
		let clip = document.querySelector('.clips');
		rotate = 0;
		let loop = setInterval(() => {
		    if(rotate>100)
			rotate = rotate-100 ; 
		    rotate++;
		    clip.style.transform = 'rotate('+ 3.6*rotate + 'deg)';
		},100)
	</script>
</html>

在这里插入图片描述

上面已经实现了一个能够旋转的圆形线条了，那么怎么实现两个圆形线条环绕效果呢，很简单只需要再加上一个div,初始的时候裁剪左下角，然后两者旋转角度一致，这样就可以保证两个圆形线条环绕的效果.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				position: absolute;
				top: 200px;
				left: 200px;
				width: 200px;
				height: 200px;
			}
			.clips{
				position: absolute;
				width: 200px;
				height: 200px;
				border: 2px solid black;
				border-radius: 50%;
				clip:rect(0px,220px,100px,100px);
			}
			.clips2{
				position: absolute;
				width: 200px;
				height: 200px;
				border: 2px solid black;
				border-radius: 50%;
				clip:rect(100px,100px,200px,0px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="clips"></div>
			<div class="clips2"></div>
		</div>
	</body>
	<script>
		let clip = document.querySelector('.clips');
		let clip2 = document.querySelector('.clips2');
		rotate = 0;
		let loop = setInterval(() => {
		    if(rotate>100)
			rotate = rotate-100 ; 
		    rotate++;
		    clip.style.transform = 'rotate('+ 3.6*rotate + 'deg)';
			clip2.style.transform = 'rotate('+ 3.6*rotate + 'deg)';
		},100)
	</script>
</html>

在这里插入图片描述
这样就实现两个环绕的圆形效果.

4. 如何实现圆环动态加载类似于进度条加载

<fonr size="2> 对于进度条加载，可以看出两个半圆弧线，开始的时候，左半圆弧开始旋转到右边，然后转到180度的时候，右半圆弧开始旋转到左边，转到360度的时候，进度条加载完毕.代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				position: absolute;
				top: 200px;
				left: 200px;
				width: 200px;
				height: 200px;
				clip: rect(0 210px 210px 100px);/*这用于遮蔽开始时候左半圆弧，这样开始就可以从右上角逐步显示圆弧*/
			}
			.clips{
				position: absolute;
				width: 200px;
				height: 200px;
				border: 2px solid black;
				border-radius: 50%;
				clip:rect(0px,100px,210px,0px);
			}
			.clips2{
				position: absolute;
				width: 200px;
				height: 200px;
				border: 2px solid black;
				border-radius: 50%;
				clip:rect(0px,210px,210px,100px);

			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="clips"></div>
			<div class="clips2"></div>
		</div>
	</body>
	<script>
		let box  = document.querySelector('.box')
		let clip = document.querySelector('.clips');
		let clip2 = document.querySelector('.clips2');
		rotate = 0;
		let loop = setInterval(() => {
		<!-- 通过角度判断哪个半圆进行显示 -->
			if(rotate>100){
				rotate = rotate-100 ; 
				clip2.style.display= "none" ; 
				box.style.clip = "rect(0 210px 210px 100px)" ;
			}else if(rotate>50){
				clip2.style.display = "inline-block" ;
				clip2.style.transform = 'rotate('+ 3.6*(rotate-50) + 'deg)';
				box.style.clip = "auto"
			}else{
				clip2.style.display= "none" ; 
				clip.style.transform = 'rotate('+ 3.6*rotate + 'deg)';
			}
		    rotate++;
		    
		},100)
	</script>
</html>
归来空空
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 动画配合clip属性创建圆形进度条动画
端着木鱼敲代码的专栏
07-16 2965
这里先讲下clip这个css中很少用到的样式，在w3chool是这样描述的 clip 属性剪裁绝对定位元素。 当一幅图像的尺寸大于包含它的元素时会发生什么呢？”clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。 第一句话就很明确的表达了，裁剪元素必须带position:absolute;属性，然后才能使用clip去对图像进行裁剪。语法为 img
clip实现圆环进度条
weixin_34099526的博客
02-08 257
效果 怎么实现这样一个圆环进度条的效果呢，可以使用canvas、svg、GIF等等方式，今天我们来说下使用css3怎么来实现。 实现思路 圆环很简单，一行cssborder-radius:50%即可实现，而且没有兼容性问题，什么，你说IE，让它滚... 我们这里需要三个圆环，一个整的，两个半的。大概画了下图 这里半圆环我使用了clip进行裁剪，主要代码如下, .left{ width: 20...
使用CSS clip 属性实现音频播放圆环进度条
weixin_33809981的博客
04-24 498
  突然有需求要做一个圆环的音频播放进度条（上图效果），自己琢磨尝试了半天，也没有实现。最后度娘一下，才知道css还有一个clip属性，完美实现需求。分享一下，说不定能帮其它小伙伴。至于有没有用，那就不知道了，who care！OK，费话打住，Let's go! CSS clip 属性   先简单了解一下css clip属性 说明 c...
css环形进度条clip,圆形进度条的实现纯css
weixin_29323493的博客
08-04 413
如图代码如下{{ item.deg + 'deg' }}export default {data() {return {percentData: [{number: '123213',deg: 90,},{number: '123213',deg: 180,},{number: '123213',deg: 270,},{number: '123213',deg: 360,}]}},created(...
canvas画圆形头像（clip，globalCompositeOperation的使用）
weixin_43195813的博客
06-25 1088
当我们使用globalCompositeOperation时，绘制区域的时候需要填充颜色，如果没有填充颜色或者填充颜色的透明度为0时并不会实现组合的效果。
css3 clip实现圆环进度条的示例代码
09-24
在这个例子中，我们将详细探讨如何使用`clip`属性来实现一个圆环进度条。 首先，理解`clip`属性的工作原理至关重要。`clip`属性的语法是`rect(top, right, bottom, left)`，它定义了一个矩形剪裁区域，参数分别代表...
CLIP:CLIP算法的实现
03-27
夹子几天后，该存储库将为CLIP：神经元网络的廉价Lipschitz培训[1]中提出的，用于Lipschitz正则化神经网络的CLIP算法提供一种实现。 ！[公式]（ {i \ pi} = -1） 随时使用它，这样做时请参考我们的论文。先决条件...
clip 剪裁矩形实现代码
12-11
在这个矩形内的内容才可见，出了这个剪裁区域的内容和 overflow:hidden 的效果相同。剪裁区域可能比元素的内容区大，也可能比内容区小。 clip属性值：auto | rect (top, right, bottom, left) auto代表不裁切，rect...
背景剪切 html,用CSS3 background-clip裁剪背景
weixin_39671935的博客
06-27 512
用CSS3 background-clip裁剪背景，这个方法应用很多。* 用于指定background是否包含content之外的border,padding。默认值为border-box，即background从包含border在内的地方开始渲染，IE的默认表现也等同于border-box背景裁剪(背景从border(即包括border在内)开始绘制(渲染))：#background-clip-...
用css中clip属性剪裁绝对定位图片（以及写多种颜色的圆）
qq_39288987的博客
10-31 451
clip定义 clip 属性剪裁绝对定位元素。 当一幅图像的尺寸大于包含它的元素时会发生什么呢？“clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。 说明 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。 所有主流浏览器都支...
Fluent截取局部面
weixin_45896923的博客
11-23 2万+
fluent中截取局部面一、正常create plane二、bounded 建立局部面三、create iso/surface四、在画网格时，就在需要的地方建立面 在使用fluent模拟时，我们经常需要对某一个面监测或者计算某一个面的物理量，直接create plane建立的是一个无限大的平面，经常不符合要求，下边介绍几种建立局部面的方法，以该3D模型为例子，目标在左侧截出第二层流道局部。 一、正常create plane 操作：create-------plane，输入该界面上三个不在一条直线上的点。
Fluent中的各种初始化
wsxww11的博客
04-24 2万+
初始条件指的是初始时刻计算域所处的状态。通常需要人为指定。对于稳态问题，初始条件不会影响最终结果，但是会影响到计算收敛过程。若设定的初始条件与真实状态有较大差异时，可能会造成计算不收敛。对于瞬态问题，初始条件会直接影响计算结果。 在Fluent中进行求解计算之前，都需要对计算域进行初始化。Fluent提供了多种初始化方法：Hybird Initialization、Standard Initialization、FMGInitialization、Patch、fluent meshing以及UDF宏。初始
fluent中截取任意面的数据
asd165654的博客
11-01 3259
原版视频下载链接:https://pan.baidu.com/s/1c2aE740 密码: mf2i 转载于:https://www.cnblogs.com/liusuanyatong/p/11259698.html
css 的clip属性
u012506466的专栏
05-09 512
clip 属性剪裁绝对定位元素。
Tikz作图教程：说说图形颜色填充那些事儿
大哉数学之为用
05-01 5438
初学Tikz 作图的朋友也许觉得给图形填充颜色很费事儿，尤其是那些不规则图形的颜色填充。 事实上，只要你掌握一个基本思想和三个填充技巧，图形颜色填充就会变得易如反掌！下面我们详细介绍这些方法，学会本文中的各个例子，再复杂的颜色填充问题都不在话下了！ 本文较长，需要的朋友可以收藏备查！ 基本思想 由曲线段（折线段）首尾相连得到的封闭图形都可以通过命令\filldraw[fill=<color>]将它填充为设定的颜色<color>。 值得注意的是，如果折线段（曲线段）的起点和终点没有连.
css3的clip-path方法剪裁实现（三角形，多边形，圆，椭圆）
热门推荐
卡卡罗特的博客
06-06 3万+
本例讲解如何通过clip-path把一个div（元素，可以是图片等）裁切成不同的形状，这里以一个div为例宽高均为300px注意：不支持IE和Firefox，支持webkit浏览器，在现代浏览器中需要使用-webkit-前缀。&lt;div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;...
如何使用纯 CSS（border-radius 和 clip）属性画出半圆
青颜的天空的博客
09-13 4118
1、使用border-radius画半圆 把div高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; }
圆环环绕进度条
qq_38948398的博客
12-02 314
老规矩，echarts图形，先上效果图，后上代码 UI设计的图形中有一个进度条，是环绕形式的，当时想的是这个深度可能是绘制图形时加的3D深度绘制，可是后来发现并不是。 只用画一个二维的间断圆环，然后利用css3的3d场景，进行X轴偏转，就可以实现了。 代码附上: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport"
html静态圆形进度条代码,css3 clip实现圆环进度条的示例代码
最新发布
05-26
以下是一个基于 HTML 和 CSS3 clip 的静态圆形进度条的示例代码： HTML： ```html <div class="progress-ring"> <div class="progress-bar"></div> <div class="progress-fill"></div> </div> ``` CSS： ```css .progress-ring { position: relative; width: 120px; height: 120px; margin: 20px auto; border-radius: 50%; background-color: #f2f2f2; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); } .progress-bar, .progress-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; } .progress-bar { clip: rect(0, 60px, 120px, 0); background-color: #2ecc71; transform: rotate(-90deg); z-index: 1; } .progress-fill { clip: rect(0, 120px, 120px, 60px); background-color: #3498db; transform: rotate(-90deg); } ``` 解释： - `.progress-ring` 用于包含整个进度条，设置为圆形，背景色为灰色； - `.progress-bar` 用于表示已完成的进度部分，背景色为绿色； - `.progress-fill` 用于表示未完成的进度部分，背景色为蓝色； - `clip` 属性用于剪切元素，通过设置不同的矩形区域来实现圆环效果； - `transform` 属性用于旋转元素，使进度条从顶部开始； - `z-index` 属性用于控制层叠顺序，使绿色部分在蓝色部分之上。 可以根据需要修改颜色、大小等样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值