文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用clip-path实现CSS形状变换

2024-04-02 19:55

关注

这篇文章主要讲解了“怎么用clip-path实现CSS形状变换”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用clip-path实现CSS形状变换”吧!

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

运用clip-path超强的网站

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

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

怎么用clip-path实现CSS形状变换

使用clip-path绘制多边形

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

这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

点击: 加入

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

  • 使用clip-path要从同一个方向绘制,如果顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个连续的线段,若线段彼此有交集,面积区域就会有相减的状况发生(当然如果这是你要的效果就无妨了)。

  • 如果绘制时采用「比例」的方式绘制,长宽就必须要先行设定,不然有可能绘制出来的长宽和我们想像的就会有落差,使用「像素」绘制就没有这种问题。

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

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

怎么用clip-path实现CSS形状变换

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

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

怎么用clip-path实现CSS形状变换

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

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

怎么用clip-path实现CSS形状变换

image.png

正三角形

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

怎么用clip-path实现CSS形状变换

image.png

正方形

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

怎么用clip-path实现CSS形状变换

image.png

正五边形

正五边形就要计算一下了,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%);
  }

怎么用clip-path实现CSS形状变换

image.png

正六边形

正六边形的计算比较简单,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%);
  }

怎么用clip-path实现CSS形状变换

image.png

正七边形

正七边形是这里头需要计算最多的形状,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%);
  }

怎么用clip-path实现CSS形状变换

image.png

正八边形

正八边形的计算如下,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实现CSS形状变换

搭配clip-path做动画

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

正多边形的变换

怎么用clip-path实现CSS形状变换

三角形的变换组合

怎么用clip-path实现CSS形状变换

感谢各位的阅读,以上就是“怎么用clip-path实现CSS形状变换”的内容了,经过本文的学习后,相信大家对怎么用clip-path实现CSS形状变换这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯