如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制
自小编上次整理了一些基础图形的绘制方法之后,大家都纷纷表示对css3的绘图技巧学习很有帮助。虽说万变不离其宗,再复杂的图形也可以用最简单的三角形或者圆弧组合出来,但仍有不少朋友反映,学会基本图形也不懂得怎样组合,也不知道什么时候用伪元素比较合适。所以今天小编来一篇相对复杂的图形绘制教程,大家看过之后就会发现,很多看似复杂的图形(比如下图这样的),换一下组合方式就会变得简单很多。
如果你觉得以上图形无从下手,或者觉得需要用很多个html元素来完成的话,那相信本教程对你的帮助会非常大。
现在我们先来编写基础的html代码:
后面我们只要往里面填充样式和元素即可测试效果。
我们先来看一个比较简单的形状,鸡蛋。可别小看它,想当年达芬奇光画这个鸡蛋都练了不知道多少年,所以大家也来学画蛋吧,以后当上一名CSS3画家。
上次我们学习了绘制椭圆的方法,乍一看似乎在椭圆基础上进行修改即可获得正确的效果。但之所以能绘制出椭圆,其原因在于border-radius使用了百分比,而在一个角里面,x和y的百分比始终相等。
举个例子,一个矩形的宽度为30px,高度为40px,如果我们让一个角的圆角半径等于50%,那么圆角在x方向上的半径等于15px,y方向上的半径等于20px,若为40%,则x方向半径等于12px,y方向半径等于16px,x和y的比例始终等于矩形的宽高比3:4。所以,你希望x方向上的半径等于15px,y方向上的半径等于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部分就一个div
CSS代码如下:
.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);
}
小编相信,只要用心学习,技术再菜的童鞋也能照着教程把里面的图形全部绘制出来。然而要是换成其它图形,我想还是会有人说画不出来,或者要绕很大一个圈子才能做得到。这也是情理之中的事情,毕竟这当中的技巧没有一般的规律可循,更多的是经验的积累。所以要在实战用运用自如,除了熟悉一些常用的手法之外,还要多参考成功的案例,从中获取更多的灵感。
如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制相关推荐
- [css] 有哪些标签是不支持伪元素的?
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
- [css] 不用换行的标签,怎么伪元素实现换行的效果?
[css] 不用换行的标签,怎么伪元素实现换行的效果? 使用\A 换行,并且指定white-space: pre保留换行效果.foo::after {content: '123\A 456';whit ...
- 【CSS】1049- 深入了解::before 和 ::after 伪元素
本文从最简单的开始,解释如何理解和使用::before和::after.然后再在实际使用场景中去应用它. ::before和::after是什么? ::before和::after可以添加到选择器以创 ...
- html面包屑菜鸟,css content属性与before及after伪元素配合使用价值发挥到最大
content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧
- CSS笔记(一):before伪元素实现半透明背景图
2019独角兽企业重金招聘Python工程师标准>>> 通过给元素before伪元素作为背景图片的载体,实现半透明背景. 这样的好处是避免直接调整opacity导致前景及子元素也变透 ...
- css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
- html如何设置打印分页打印出来,网页中如何用 CSS 设置打印分页符
Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. 第 1 页 第 2 页 第 3 页 任何浏览器 ...
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- [转]你所不知的 CSS ::before 和 ::after 伪元素用法
SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...
最新文章
- 移动IM开发指南3:如何优化登录模块
- 9、MySQL定义条件和处理程序
- CentOS中怎样查看系统版本和内核版本
- Rapid7 部分源代码遭泄露,成 Codecov 供应链攻击第四个受害者
- “玲珑杯”ACM比赛 Round #19
- [POI2013]MOR-Tales of seafaring
- 应用MySQL数据库的实现本地BLAST及BLAST2GO
- 看完这个,你还觉得SOME/IP测试难吗?
- Python爬虫伪装,请求头User-Agent池,和代理IP池搭建使用
- Windows配置互联网访问检测服务器-IspSrv
- 微信小程序开发中的这些坑你遇到过吗?
- EditText设置输入的类型,比如说限制只能输入字母和数字
- 库存转换是什么意思_什么是库存?
- 惊闻Google Reader将被关闭
- 无水印思维导图——导出亿图(试用版)无水印图片
- Oracle Demo库默认用户/密码为什么叫Scott/Tigger?
- Scrapy-Splash爬取淘宝排行榜(二)
- 启用数据空间:让VirtualBox虚拟机中的Ubuntu 10.10和XP主机互通有无
- 331_S32K144 CAN FIFO初步
- 关于\xEF\xBB\xBF的介绍
热门文章
- Java 从入门到高级学习路线
- grid - 隐式命名网格线名称
- Java多线程系列---“JUC锁”01之 框架
- 万恶之源 - Python基础数据类型一
- 操作系统文件编程知识
- Python基础-变量作用域
- osal_start_timerEx(Lock_TaskID,SBP_START_DEVICE_EVT,SBP_PERIODIC_EVT_PERIOD)的理解
- Qt 【关于控件样式,鼠标进入、离开、点击】
- AutoMapper搬运工之自定义类型转换
- Android Gallery控件使用方法详解