内容简介:本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:本节课要将的内容:代码如下:
本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:
- css揭秘实战技巧- 背景与边框 [一]
- css揭秘实战技巧- 形状 [二]
- css揭秘实战技巧 - 视觉效果[三]
- css揭秘实战技巧 - 字体排印[四]
- css揭秘实战技巧 - 用户体验[五]
- css揭秘实战技巧 - 结构与布局[六]
- css揭秘实战技巧 - 过渡与动画[七]
前言
本节课要将的内容:
- 自适应椭圆
- 平行四边形
- 菱形图片
- 简单的饼图
- 总结
一:自适应椭圆
1. 正方形
代码如下:
width: 100px; height: 100px; background: greeen; 复制代码
接下来,我们通过设置border-radius来改变一下正方形的形状:
2. 圆形
width: 100px; height: 100px; background: greeen; //border-radius: 50px; //border-radius: 50px 50px; //border-radius: 50%; //border-radius: 100px; 以上四种写法都可以实现圆形的效果,也就是说:border-radius的值可以是具体值,也可以是百分比(为了代码的可拓展性,最好用百分比),同时,只要值大于正方形的长度的一半(例如:此处是50px),结果一定是圆形. 复制代码
3. 单独设置四个角半径的的圆
实现代码如下:
width: 100px; height: 100px; border-radius: 50px 40px; //等价于50px 40px 50px 40px;方向依次是从左上角开始顺时针旋转! background: green; 复制代码
4. 单独设置水平方向和垂直方向的圆
代码如下:
width: 100px; height: 100px; border-radius: 50px / 40px; //用 / 隔开 background: green; 复制代码
5.椭圆
代码如下:
width: 200px; height: 100px; border-radius: 50% / 50%; //前提是宽高不同 background: green; 复制代码
6. 半椭圆
代码如下:
width: 100px; height: 100px; border-radius: 100% 0 0 100% / 50% 0 0 50%; background: green; 复制代码
7. 四分之一椭圆
代码如下:
width: 200px; height: 100px; border-radius: 100% 0 0 0 / 100% 0 0 0; background: green; 复制代码注意:从椭圆,到半椭圆,再到四分之一椭圆,我们要理解border-radius是怎么设置的,这就和border-radius的值的写法有关了:border-radius: 50% 50% 50% 50% / 50% 50&% 50% 50%;其他简写都可以转换成前面的写法,方向是从左上角开始顺时针旋转,/ 前面是水平方向的半径,后面是垂直方向的半径。
二:平行四边形
我们平时项目中,尤其是公司官网设计的时候,很多时候会遇到这种平行四边形的按钮效果,效果如下:
如何实现平行四边形效果的按钮呢?
我们可能会这样想,矩形其实是平行四边形的超集,所以只需要把矩形斜向拉伸一下不久可以啦。
然后,我们使用transform: skewX(45deg)拉伸以下,代码如下:
width: 200px; height: 100px; text-align: center; line-height: 100px; background: green; transform: skewX(-45deg); 复制代码
呀,怎么里面的内容也被拉伸了,怎么解决呢?最直接的方法内容部分再嵌套一层div,然后再单独设置内容的拉伸角度, 但是,如果还是只有这一个div呢?如何用css去解决这一问题呢? 代码如下:
div{ position: relative; width: 200px; height: 100px; text-align: center; line-height: 100px; } div::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: green; transform: skewX(-45deg); } 复制代码
这是一个小技巧: 利用伪元素以及定位属性,将伪元素设置成一个方块(其实相当于还是嵌套的一个元素),并且对方块进行变形,且设置z-index:-1,将该伪元素作为一个背景块,放在内容下面。当我们想要某个元素变形,并且不希望该元素里面的内容变形的时候,都可以采用该方法。
三:菱形图片
- 首先,我们很容易想到,把一个正方形,使用transform:rotate() 旋转一下即可。 代码如下:
width: 100px; height: 100px; background: green; transform: rotate(-45deg); 复制代码
但是这种方案其实有个问题:我们设置的宽高分别为100px, 但是旋转以后,元素所占的空间就需要扩大,否则会出现如下情况
所以采用这种方案,需要我们手动去控制菱形所占的区域,即对角线的长宽。
- 接下来,我们采用另外一种方案,clip-path, 类似于svg中的path,我们可以指定一系列的坐标点,然后连起来,形成我们任意想要的图形。 代码如下:
width: 200px; height: 100px; background: green; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 复制代码
效果如下:
总结:这里,我们采用clip-path绘制了四个点,效果是菱形,同样,我们可以去绘制三个点的三角形,还有五边形,六边形等等各种图形,只要你确定好各个点的位置即可。同时要注意的是,clip-path目前的兼容性可能还没有支持的很好。
四:简单的饼图
首先,看一下最简单的圆形效果:
代码如下:
width: 100px; height: 100px; border-radius: 50%; background-color: green; 复制代码
然后,我们看一下接下来的效果:两半圆
我们来分析一下两半圆的实现方案:
- 通过添加两个元素,设置左边圆和右边圆,然后拼接在一起, 或者为了只使用一个元素,可以同时使用before和after分别设置左半圆和右半圆
div { width: 100px; height: 100px; border-radius: 50%; position: relative; } div::before { content: ''; display: inline-block; width: 50%; height: 100%; border-radius: 200% 0 0 200% / 100% 0 0 100%; background: green; position: absolute; left: 0px } div::after { content: ''; display: inline-block; width: 50%; height: 100%; border-radius: 0 200% 200% 0 / 0 100% 100% 0; background: red; position: absolute; right: 0px } 复制代码
- 通过linear-gradient渐变实现。
width: 100px; height: 100px; border-radius: 50%; background-image: linear-gradient(to right, green 50%, red 0); 复制代码
3.通过linear-gradient结合背景颜色实现。
width: 100px; height: 100px; border-radius: 50%; background-color: green; background-image: linear-gradient(to right, transparent 50%, red 0); 复制代码
接下来,我们再近一步,看一下如下效果:
首先,我们来分析一下,相对于我们之前两个半圆的效果,只要在此基础上,再加一个半圆,并且背景颜色设置为green, 然后覆盖在当前两半圆上,同时控制旋转的角度,这样不就得到了,
代码如下:
div { width: 100px; height: 100px; border-radius: 50%; background: green; background-image: linear-gradient(to right, transparent 50%, red 0); } div::before { content: ''; display: inline-block; width: 50%; height: 100px; border-radius: 0 100% 100% 0 / 50% 50%; margin-left: 50%; background-color: inherit; transform: rotate(45deg); transform-origin: 0 50%; } 复制代码
来来来,再近一步,从上面的代码,我们可以看到旋转的角度被写死为45deg, 如果可以动态的控制旋转的角度,不就可以得到类似进度条的效果了。效果如下:
所以,接下来,最关键的是如何动态控制旋转角度?简单啊,animation不就可以啦。
代码如下:
div { width: 100px; height: 100px; border-radius: 50%; background: green; background-image: linear-gradient(to right, transparent 50%, red 0); } div::before { content: ''; display: inline-block; width: 50%; height: 100px; border-radius: 0 100% 100% 0 / 50% 50%; margin-left: 50%; background-color: inherit; transform-origin: 0 50%; animation: spin 3s linear infinite, bg 6s step-end infinite; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: red; } } 复制代码
五:总结
本节,我们实现了常见的一些椭圆,半圆,四分之一圆等效果,实现原理就是border-radius的使用,可以分别指定四个角在水平方向和垂直方向不同的半径值,同时,我们还知道了clip-path属性的使用,可以通过该属性绘制节点,然后连线,这样就可以实现任何我们想要的形状。
以上所述就是小编给大家介绍的《css揭秘实战技巧 - 形状 [二]》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- c – 如何使用QPainter或QPainterPath使用一个形状或一组形状连接在Qt中绘制自定义形状(如撕裂)
- 用CSS画一些多边形状
- 45个值得收藏的 CSS 形状
- css绘制各种形状图形(第二版)
- 教你用CSS玩转各种形状?
- 你该知道的《css揭秘》--形状篇
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。