clip-path实现loading圆饼旋转效果以及其他方法
一、loading效果
二、clip-path
css中的剪切clip-path属性是CSS Masking模块的一部分。
矩形
clip-path:inset(top right bottom left round top-raduis right-radius bottom-radius left-radius);
例子:
原图
(690x1035)
.clipPath{
-webkit-clip-path:inset(50px 30px 300px 100px round 0% 0% 0% 0%);
}
剪切结果如下:
(图手动缩小,太大了)
.clipPath{
-webkit-clip-path:inset(130px 70px 300px 100px round % 0% 0% 0%);
}
效果这样:
.clipPath{
-webkit-clip-path:inset(130px 70px 300px 100px round 0% 50% 0% 0%);
}
.clipPath{
-webkit-clip-path:inset(130px 70px 300px 100px round 0% 0% 50% 0%);
}
.clipPath{
-webkit-clip-path:inset(130px 70px 300px 100px round 0% 0% 0% 50%);
}
.clipPath{
-webkit-clip-path:inset(130px 70px 300px 100px round 50% 10% 50% 10%);
}
clip-path:inset(top right bottom left);
其中前四个参数的值大小对应的则是距离原始元素的4个边的距离
圆形
clip-path:circle(radius at x-axis y-axis);//radius表示半径大小,x-axis和y-axis表示圆心坐标(原图的坐标点)
.clipPath{
-webkit-clip-path:circle(230px at 350px 310px);
}
椭圆
clip-path:ellipse(x-rad y-rad at x-axis y-axis);
其中x-rad,y-rad分别表示椭圆的长半轴和短半轴
.clipPath{
-webkit-clip-path:ellipse(230px 180px at 350px 310px);
}
最喜欢的就是下面的技能
多边形
clip-path:polygon(x1 y1,x2,y2,x3,x3,...,xn yn);
根据坐标点围城的图形进行剪切
.star{
-webkit-clip-path:polygon(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0 38%,37% 38%);
width:200px;
height:200px;
background-color: cornflowerblue;
}
三、loading效果实现思路
用两个div进行实现:
将浅颜色的圆放在深颜色的圆上面,下面深颜色的圆不动,大小不变,上面浅颜色的圆由小变大,形成loading的旋转效果。
.circleCakeTop{
background-color: #FB8BBD;
border-radius:50%;//矩形变成圆形
width: 60px;
height: 60px;
position: absolute;
top:15px;
left:15px;
animation:circleCake 2s linear infinite;
-webkit-animation:circleCake 2s linear infinite;
transform:rotate(45deg);//旋转45度,从90度开始画圆
}
@keyframes circleCake{ 0%{
-webkit-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
-moz-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
-o-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
-ms-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);//刚开始时候是(30px 30px)-(0px 0px)的一个直线就是没有剪切
}
12.5%{
-webkit-clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);
-moz-clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);
-ms-clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);
-o-clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);
clip-path: polygon(30px 30px,0 0,60px 0,60px 0,60px 0,60px 0);//顺时针1/4圆,动画完成
}
25%{
-webkit-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);
-moz-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);
-ms-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);
-o-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);
clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,60px 60px,60px 60px);//1/4圆到半圆
}
37.5%{
-webkit-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);
-moz-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);
-ms-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);
-o-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);
clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 60px);//半圆到3/4圆
}
50%{
-webkit-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);
-moz-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);
-ms-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);
-o-clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);
clip-path: polygon(30px 30px,0 0,60px 0,60px 60px,0 60px,0px 0px);//3/4圆到整圆
}
62.5%{
-webkit-clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);
-moz-clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);
-ms-clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);
-o-clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);
clip-path: polygon(30px 30px,60px 0px,60px 0,60px 60px,0 60px,0px 0px);//整圆到3/4圆
}
75%{
-webkit-clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);
-moz-clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);
-ms-clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);
-o-clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);
clip-path: polygon(30px 30px,60px 60px,60px 60px,60px 60px,0 60px,0px 0px);//3/4圆到半圆
}
87.5%{
-webkit-clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);
-moz-clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);
-ms-clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);
-o-clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);
clip-path: polygon(30px 30px,0px 60px,0px 60px,0px 60px,0 60px,0px 0px);//半圆到1/4圆
}
100%{
-webkit-clip-path: polygon(30px 30px,0 0px,0px 0,0px 0px,0 0px,0 0px);
-moz-clip-path: polygon(30px 30px,0px 0,0px 0,0px 0px,0 0px,0 0px);
-ms-clip-path: polygon(30px 30px,0px 0,0px 0,0px 0px,0 0px,0 0px);
-o-clip-path: polygon(30px 30px,0px 0,0px 0,0px 0px,0 0px,0 0px);
clip-path: polygon(30px 30px,0px 0,0px 0,0px 0px,0 0px,0 0px);//1/4圆到刚开始的状态
}
}
实际的浅颜色圆是由矩形的border-radius:50%属性变成圆形。
注意:自己在编码过程中,为了省劲,有的0后没有加px,导致3/4圆到整圆时候出现错误,加上px后效果正确。严谨一些,以后都加上px。(但是还不知道是为什么)
以上自己的方法,兼容性不好,-webkit-内核的浏览器支持的比较好,FireFox支持的效果很不好,IE就更别说了。
其他方法就需要动一下脑子,张鑫旭大神的一篇博客中提到的方法很好,我是没有想到,多多学习。
链接:http://www.zhangxinxu.com/wordpress/?p=4144
clip-path实现loading圆饼旋转效果以及其他方法的更多相关文章
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- WPF使用PATH来画圆
WPF使用Path来画圆, 在 WPF 中可以使用 Path (路径) 来画圆,而 Path 支持两种写法:xaml 代码格式.标记格式,这里介绍的是标记格式: 例子: <Path Data=& ...
- [转载]error while loading shared libraries的解決方法
转自:https://blog.csdn.net/dumeifang/article/details/2963223 error while loading shared libraries的解決方法 ...
- 转error while loading shared libraries的解決方法
error while loading shared libraries的解決方法 者 icq 21:03 | 靜態連結網址 | 迴響 (0) | 引用 (1) | 點閱次數 (270) | Prog ...
- 【C#】一个Loading窗体载入与销毁的方法
写在前面 Minecraft Command Editor 2跳票了近两年的时间(对不起!!).2021年2月,我重启了MCE项目,并正式命名为Minecraft Command Editor 202 ...
- 自定义圆饼(利用贝塞尔曲线和CGContext类完成)
-(void)drawRect:(CGRect)rect{ CGFloat w = self.bounds.size.width; CGFloat h = self.bounds.size.heigh ...
- 理解Clip Path
http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html http://www.cnblogs.com/coco1s/p/602 ...
- error while loading shared libraries的解決方法
我是在启动nginx的时候报这个错误,搜索这个错误时发现这篇文章,非本人(小渡博客)原创. 原文地址:http://blog.csdn.net/dumeifang/article/details/29 ...
- DPDK运行出现error while loading shared libraries的解決方法
问题 error: while loading shared libraries: xxx.so.0:cannot open shared object file: No such file or d ...
随机推荐
- 暑期训练狂刷系列——Hdu 1698 Just a Hook (线段树区间更新)
题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=1698 题目大意: 有一个钩子有n条棍子组成,棍子有铜银金三种组成,价值分别为1,2,3.为了对付每场 ...
- Join方法,yield方法,线程的优先级
- c#中stringbuilder的方法总结
String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与创建新 ...
- SpringBoot 2.x (2):请求和传参
其实请求和传参这些知识属于SpringMVC 不过这也属于必须掌握的知识,巩固基础吧 GET请求: 以第一篇文章自动的方式创建SpringBoot项目: 然后新建Controller: package ...
- Mac下部署与启动STF
一.stf在Mac下的部署1.安装Java及jdk可自己谷歌(如果不能自建云梯)2.安装nodejs包(我是直接在官网下载的LTS版本) • Node.js v8.12.0 to /usr/local ...
- (Android MVVM)使用Data Binding Library(1)
Data Binding Library 用官方提供的Data Binding Library,可以最大限度的减少findViewById(),setOnClickListener()之类的胶水代码, ...
- Petri网的工具
需要寻找 Petri 网的工具的朋友可以在 http://www.informatik.uni-hamburg.de/TGI/PetriNets/tools/complete_db.html 里面找一 ...
- Node.js——render封装
封装 挂在到res上
- mongodb用户权限管理(二)
数据库 分配用户权限 有了创建语法,和参数说明,接下来开始实践. 注意,还有一点,账号是跟着数据库绑定的,在那个库里授权,就在那个库里验证(auth) 否则会失败 创建 账号管理授权权限 的账号 &g ...
- MATLAB 中的randn函数
matlab函数 randn:产生正态分布的随机数或矩阵的函数 randn:产生均值为0,方差σ^2 = 1,标准差σ = 1的正态分布的随机数或矩阵的函数. 用法: Y = randn(n):返回一 ...