网站维护意义,网站自动生成系统,网站搭建软件工具,制作企业网站怎么报价自小编上次整理了一些基础图形的绘制方法之后#xff0c;大家都纷纷表示对css3的绘图技巧学习很有帮助。虽说万变不离其宗#xff0c;再复杂的图形也可以用最简单的三角形或者圆弧组合出来#xff0c;但仍有不少朋友反映#xff0c;学会基本图形也不懂得怎样组合#xff0…自小编上次整理了一些基础图形的绘制方法之后大家都纷纷表示对css3的绘图技巧学习很有帮助。虽说万变不离其宗再复杂的图形也可以用最简单的三角形或者圆弧组合出来但仍有不少朋友反映学会基本图形也不懂得怎样组合也不知道什么时候用伪元素比较合适。所以今天小编来一篇相对复杂的图形绘制教程大家看过之后就会发现很多看似复杂的图形(比如下图这样的)换一下组合方式就会变得简单很多。如果你觉得以上图形无从下手或者觉得需要用很多个html元素来完成的话那相信本教程对你的帮助会非常大。现在我们先来编写基础的html代码:后面我们只要往里面填充样式和元素即可测试效果。我们先来看一个比较简单的形状鸡蛋。可别小看它想当年达芬奇光画这个鸡蛋都练了不知道多少年所以大家也来学画蛋吧以后当上一名CSS3画家。上次我们学习了绘制椭圆的方法乍一看似乎在椭圆基础上进行修改即可获得正确的效果。但之所以能绘制出椭圆其原因在于border-radius使用了百分比而在一个角里面x和y的百分比始终相等。举个例子一个矩形的宽度为30px高度为40px如果我们让一个角的圆角半径等于50%那么圆角在x方向上的半径等于15pxy方向上的半径等于20px若为40%则x方向半径等于12pxy方向半径等于16pxx和y的比例始终等于矩形的宽高比3:4。所以你希望x方向上的半径等于15pxy方向上的半径等于30px那用上次的方法是绝对不可能做到的。对于这个蛋来说我们不难发现x方向上的圆角半径都刚好等于宽度的一半也就是50%但是y方向就不一样了上面两个角的半径明显大于下面两个角。假设上面的圆角半径是60%那么下面的圆角半径就是40%了这样就可以确保圆角之间没有直线连接。那么问题来了我们要实现的就是左上角的圆角半径在x方向上等于50%在y方向上等于60%又该怎样实现呢这里小编给大家介绍圆角半径的另一个用法——通过斜杠分开x和y方向的圆角半径。border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;其中/前面的部分代表x方向上的4个半径顺序依次为左上右上右下左下(从左上顺时针排下来即可)自然而然地就会想到/后面的部分就代表y方向上的4个半径顺序跟x方向的一样。可见左上和右上的半径都是60%而左下和右下则均为40%。下面给出完整的代码HTML部分就一个divCSS代码如下:.egg{display:block;width:126px;height:180px;background-color:red;-webkit-border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;-moz-border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;-o-border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}接下来我们看看下面的这个图形非常经典的吃豆豆游戏主角。学过基本图形绘制的朋友可能会想到用三角形擦除一个圆形来得到上图的形状。嗯这确实是一个方法但局限性相当明显因为CSS3不存在真正意义上的擦除。所谓的“擦除”仅仅是用跟背景一样的颜色进行填充而已如果背景图不是透明的话那这种做法就白搭了。这里我们换个思路首先我们知道画三角形用的是很粗的边框然后利用转角处的交界线生成三角形。所以第一步我们先让整个div的宽高等于0然后设置很粗的边框。HTML代码:CSS代码:.pacman{width:0px;height:0px;border:60px solid red;}效果如下图所示显示出来的是一个正方形但实际上它没有宽高都是边框在撑着。根据前面介绍的原理这个“正方形”其实是4个三角形拼接的结果。这样的话我们自然而然地就想到隐藏掉右侧的边框线尝试设置为0。由于4条边不对等了所以我们拆分一下。.pacman{width:0px;height:0px;border-right:0 solid red;border-top:60px solid red;border-left:60px solid red;border-bottom:60px solid red;}运行效果如下图所示:由于失去了右边线的支撑右侧全部被截没了看来60px还得保留但是又不能显示出来怎么办你可能会想到用跟背景一样的颜色来模拟隐藏但更好的方法是设置为transparent(透明)这样才会让图形适用于所有背景(包括图片背景)。.pacman{width:0px;height:0px;border-right:60px solid transparent;border-top:60px solidred;border-left:60px solidred;border-bottom:60px solidred;}再次运行效果就对了:这时候貌似把直角换成圆角就能得到正确的效果我们不妨试试圆角半径就等于边框的粗细。.pacman{/*其它样式代码省略*/-webkit-border-radius:60px;-moz-border-radius:60px;-o-border-radius:60px;border-radius:60px;}运行效果如下图所示果然正确了:最后我们来看看这个。天哪数一数12个三角形伪元素怎么塞都塞不进啊。CSS3初学者会很容易被复杂的表象所迷惑这往往是因为制作者在图形结构分析方面的经验不足无法找出多个“元素”之间的内在联系进行重组。听起来好像很玄乎那么小编就画一个“线稿”给大家看一下吧。哈哈这样是不是就恍然大悟了呢12个角竟然就是3个旋转角度不同的正方形重叠所得。这样的话总的元素数量也就3个。加上before和after伪元素的支持这么“复杂”的图形也就只需一个HTML元素就能搞定。正方形每旋转90度就重合一次所以3个元素分下来就是一个元素不旋转然后一个旋转30度一个旋转60度。而旋转可以通过CSS3的transform属性轻松实现。HTML代码如下:然后用CSS定义基本形状它不旋转:.burst-12{background:red;width:80px;height:80px;position:relative;text-align:center;}3个元素需要重叠因此要设置相对定位。然后两个伪元素的形状跟burst-12完全一致不同的只是要绝对定位所以before和after伪元素可以一起定义。.burst-12:before,.burst-12:after{content:;position:absolute;top:0;left:0;height:80px;width:80px;background:red;}最后我们让before旋转30度after旋转60度效果就完成了。.burst-12:before{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);}.burst-12:after{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-ms-transform:rotate(60deg);-o-transform:rotate(60deg);}小编相信只要用心学习技术再菜的童鞋也能照着教程把里面的图形全部绘制出来。然而要是换成其它图形我想还是会有人说画不出来或者要绕很大一个圈子才能做得到。这也是情理之中的事情毕竟这当中的技巧没有一般的规律可循更多的是经验的积累。所以要在实战用运用自如除了熟悉一些常用的手法之外还要多参考成功的案例从中获取更多的灵感。
