HTML技巧篇:灵活运用css3制作各种形状

作者 : 1024源码站 发布时间: 2020-10-13 共18人阅读

HTML技巧篇:灵活运用css3制作各种形状

本篇文章主要给大家介绍一下如何灵活的运用css3来创建各种规则和不规则形状的图形,从而可以减少图片的使用。以前一些特殊的图形我们只能在Photoshop等图像编辑软件中制作,现在使用CSS3就可以完成了。通过使用新的CSS属性,像transform和border-radius,我们可以创建非常漂亮和复杂的图形效果。

1)正方形以及长方形

HTML技巧篇:灵活运用css3制作各种形状

正方形和长方形比较简单我们只需要设置一个div的宽度和高度既可;

HTML技巧篇:灵活运用css3制作各种形状

2)圆形

HTML技巧篇:灵活运用css3制作各种形状

圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可;

HTML技巧篇:灵活运用css3制作各种形状

3)三角形

HTML技巧篇:灵活运用css3制作各种形状

要创建一个CSS三角形,需要使用border,通过设置不同边的透明效果,我们可以制作出三角形的现状。另外,在制作三角形时,宽度和高度要设置为0。

HTML技巧篇:灵活运用css3制作各种形状

以上制作了3个三角形,如果只想要一个,将border-color其它的颜色也设置为transparent即可。

4)心形

HTML技巧篇:灵活运用css3制作各种形状

心形的制作是非常复杂的,可以使用两个元素来拼合制作,分别将元素旋转不同的角度,并修改transform-origin属性来元素的旋转中心点。

HTML技巧篇:灵活运用css3制作各种形状

以上代码看起来很复杂,其实主要由2个元素拼合而成,我们拆分来看box4-1和box4-2就很明了了。

HTML技巧篇:灵活运用css3制作各种形状

5)旋转的太极

HTML技巧篇:灵活运用css3制作各种形状

太极八卦看起来很复杂,其实跟心形的代码差不多,也是由3个元素拼接起来的,然后加上animation代码,让其自动旋转起来,看起来很酷炫。

HTML技巧篇:灵活运用css3制作各种形状

好了,本篇文章就给大家说到这里,大家自己动手写一下看能不能写出一样的页面效果出来,也可以找一些类似的页面自己练习一下,有需要源码的可以直接私信【网站源码】即可。

每日金句:用最少的悔恨面对过往。用最少的挥霍面对现在。用最多的梦想面对未来。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

相关说明
① 本站VIP源码资源永久免费下载www.src1024.com
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,info@src1024.com。
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

1024资源网 » HTML技巧篇:灵活运用css3制作各种形状

发表评论