巧妙运用clip-path,实现CSS形状变换

时间: 2019-04-29阅读: 555标签: svg

CSS3的“clip-path”,这个“clip-path”看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升,自然而然的就可以用它来做些与众不同的变化。


运用clip-path超强的网站

最先看到这个属性的应用,是从这个网站看到的:species-in-pieces.com/,不得不说这个网站做得实在太神了,一开始看到还真以为是用SVG做的,没想到竟然是用CSS刻出来的…真是太惊人啦!

技术图片

接着在找数据的过程中,又发现一个很强的网站:bennettfeely.com/clippy/,专门介绍「clip-path」这个CSS3的属性,你可以直接在上面拖拉或修改,除了贝兹曲线外,几乎任何形状都做得出来(中空的部分要用组合的)

技术图片


使用clip-path绘制多边形

如果不考虑一些浏览器支持度的问题,使用clip-path来绘制多边形,还比利用伪元素还制作多边形来得简单许多,而且也可以做到单一div绘制超过八边形,使用伪元素的绘制是直接从长宽着手,而利用clip-path则是要由每个点的坐标着手,因为是座标点的缘故,要做出正多边形就也同样要用到许多基本的三角函式来计算坐标,以下就利用clip-path来绘制圆形、椭圆和正多边形给大家看看。

开始绘制之前,有两点注意事项:

使用clip-path要从同一个方向绘制,如果顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个连续的线段,若线段彼此有交集,面积区域就会有相减的状况发生(当然如果这是你要的效果就无妨了)。如果绘制时采用「比例」的方式绘制,长宽就必须要先行设定,不然有可能绘制出来的长宽和我们想像的就会有落差,使用「像素」绘制就没有这种问题。


圆形circle(半径at圆心坐标)

.circle{
    width:100px;
    height:100px;
    background:#0cc;
    -webkit-clip-path:circle(50% at 50% 50%);
  }

技术图片


椭圆形ellipse(长、短轴半径at圆心坐标)

 .ellipse{
    width:100px;
    height:100px;
    background:#aaa;
    -webkit-clip-path:ellipse(25% 50% at 50% 50%);
  }

技术图片


内置矩形inset(上右下左的边距round上右下左圆角)

.inset{
    width:100px;
    height:100px;
    background:#99f;
    -webkit-clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0);
  }

技术图片


正三角形

 .a{
    width:100px;
    height:87px;
    background:#c00;
    -webkit-clip-path:polygon(0% 100%, 50%  0%,100% 100%);
  }

技术图片


正方形

.b{
    width:100px;
    height:100px;
    background:#069;
    -webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
  }

技术图片


正五边形

正五边形就要计算一下了,59/(59+95)=38.31%,31/(81*2)=19.14%

.c{
    width:162px;
    height:154px;
    background:#095;
    -webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
  }

技术图片


正六边形

正六边形的计算比较简单,50/(100+50

2)=25%,150/(100+50

2)=75%

.d{
    width:200px;
    height:174px;
    background:#f80;
    -webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  }

技术图片


正七边形

正七边形是这里头需要计算最多的形状,22/(100+622)=10.09%,202/(100+622)=90.18%,43/(43+97+78)=19.72%,(43+97)/(43+97+78)=64.22%,62/(100+622)=27.68%,(100+62)/(100+622)=72.32%

.e{
    width:224px;
    height:218px;
    background:#09c;
    -webkit-clip-path:polygon(50% 0%, 90.18% 19.72%,100% 64.22%,72.32% 100%,27.68% 100%,0% 64.22%,10.09% 19.72%);
  }

技术图片


正八边形

正八边形的计算如下,71/(100+712)=29.34%,(71+100)/(100+712)=70.66%

.f{
    width:242px;
    height:242px;
    background:#f69;
    -webkit-clip-path:polygon(29.34% 0%, 70.66% 0%,100% 29.34%,100% 70.66%,70.66% 100%,29.34% 100%,0% 70.66%,0% 29.34%);
  }

技术图片


搭配clip-path做动画

熟练了clip-path之后,当然就要用它来做点动画,下面提供两个示例,第一个是正多边形的变换,第二个则是三角形的变换组合,虽然看起来很简单,但实际制作起来却要考虑每个点的坐标,为了让形状不要有「翻转」的错觉,形状里头每个点在进行移动的时候,尽可能的不要交错,因为只要一交错,就会有交集的空白产生,就会有不自然或是翻转的现象喔!当然同样的,如果你希望有翻转的效果,应该就要让他们交错啰!


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3117

使用vue组件加载SVG图片步骤

使用vue加载SVG图片,有两种方法,一种是雪花loader,一种是vue-svg-loader(官网推荐)。在自己的项目中,本次使用vue-svg-loader加载svg图片,并且对图片进行属性修改。操作步骤:

10个开源SVG图标库

在国内,我想大家基本上都是用阿里的iconfont图标库,这里介绍10个其他的开源图标库,下面列出的所有库都是完全开源的,因为我已经检查了许可条款和条件。

SVG弧形进度环实现

先要了解svg能怎么实现的这个问题,svg的哪些元素能实现?A命令可以画椭圆和圆形,rx ry分别表示两个轴的半径,x-axis-rotatio表示x轴的旋转情况,我这里的圆弧是正置的,所以值设为0即可。

svg的path的应用

我们这里只要用到M L A 和Z命令就可以了,M L 和Z命令比较简单,这里详细讲解A命令,A命令是画弧的命令,里面的A命令有 7个参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y

svg生成环形进度条

之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制。具体效果如下图:

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

关于Data URLs svg图片显示出错和浏览器URL hash #

在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在<img src=\\\"Data URLs\\\">中,Data URLs格式与显示情况如下:

SVG基础图形和D3.js

学习如何使用D3.js来创建这些图形?这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。使用D3.js画一个SVG 的 圆 circle,可以使用如下代码创建:

一步步教你用 CSS 为 SVG 添加过滤器

SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。实际上我们是通过告诉 CSS 过滤器所拥有的 ID,然后再把过滤器应用于 SVG 的方式来实现。

通过css改变svg img的颜色

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的解决方案

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广