当前位置:天才代写 > tutorial > 网页教程 > 用纯CSS3绘制乾坤八卦图

用纯CSS3绘制乾坤八卦图

2018-05-17 08:00 星期四 所属: 网页教程 浏览:565

       乾坤八卦图衍生自中国古代的《河图》与《洛书》,伏羲根据燧人氏造设的这两幅星图所作。其形状经过抽象以后,成为对称感相当强的几何图形,无论是黑白两色还是形状,都非常地平衡和稳重。

用纯CSS3绘制乾坤八卦图_CSS3教程_图形绘制_CSS3代码_课课家

  不难发现,乾坤八卦图的形状均为圆形。而css3绘制圆的方法也很简单,设置圆角半径等于50%即可,所以绘制起来十分方便。

  大体结构就是两个半圆,左白右黑,然后上下分别绘制一个半径等于大圆一半的圆,上黑下白,最后加上两个圆点即可。

  总的来说,这个八卦图包括三层共6个元素,为了不导致混淆,本教程不打算使用伪元素。

  现在我们先来构建基础的html代码:

基础代码

  所有元素都包在big-circle里面,它们之间会相对重叠,所以需要设置相对定位,让内部元素使用绝对定位时以big-circle的左上角作为参考点。

  .big-circle{

  position:relative;

  width:200px;

  height:200px;

  }

  接下来,我们绘制左侧的半圆,整个圆我们可以用border-radius设置为50%。半圆的话,就需要有所区分,矩形的宽高比为1:2,右侧的两个角圆角半径为0。

  左侧半圆的边框颜色为黑色,背景为白色,

  总的CSS代码如下:

  .SEMi-circle-left{

  position:absolute;

  width:100px;

  height:200px;

  top:0px;

  left:0px;

  background:#fff;

  border:2px solid #000;

  -webkit-border-radius:100px 0px 0px 100px;

  -moz-border-radius:100px 0px 0px 100px;

  -o-border-radius:100px 0px 0px 100px;

  border-radius:100px 0px 0px 100px;

  }

  border-radius的4个圆角半径用英文空格分隔,依次为左上,右上,右下,左下(从左上开始顺时针数下来)。

  border-radius需要用不同前缀兼容不同的浏览器。

  运行效果如下图所示:

左侧的半圆

  类似地,右侧的样式如下。不同的部分已经用红色高亮标记出来了。

  .semi-circle-right{

  position:absolute;

  width:100px;

  height:200px;

  top:0px;

  left:100px;

  background:#000;

  border:2px solid #000;

  -webkit-border-radius:0px 100px 100px 0px;

  -moz-border-radius:0px 100px 100px 0px;

  -o-border-radius:0px 100px 100px 0px;

  border-radius:0px 100px 100px 0px;

  }

  运行效果如下图所示:

左右两侧半圆

  现在我们绘制上下两个圆。

  上面的圆样式如下:

  .small-circle-top{

  position:absolute;

  width:100px;

  height:100px;

  top:0px;

  left:50px;

  background:#000;

  -webkit-border-radius:50%;

  -moz-border-radius:50%;

  -o-border-radius:50%;

  border-radius:50%;

  }

  由于我们是绘制完整的圆,因此直接设置border-radius=50%即可,无需像前面那样需要分开设置。

  再次运行,效果如下图所示:

添加上边的圆

  看起来,下面的圆也没有任何问题了,只要改下位置和颜色即可。

  .small-circle-bottom{

  position:absolute;

  width:100px;

  height:100px;

  top:100px;

  left:50px;

  background:#fff;

  -webkit-border-radius:50%;

  -moz-border-radius:50%;

  -o-border-radius:50%;

  border-radius:50%;

  }

  运行效果如下图所示:

添加下边的圆

  好了,就差两个小圆点。方法跟绘制第2层的两个圆没有大异。

  .small-circle-bottom{

  position:absolute;

  width:100px;

  height:100px;

  top:100px;

  left:50px;

  background:#fff;

  -webkit-border-radius:50%;

  -moz-border-radius:50%;

  -o-border-radius:50%;

  -webkit-border-radius:50%;

  -moz-border-radius:50%;

  -o-border-radius:50%;

  border-radius:50%;

  }

  .circle-point-top{

  position:absolute;

  width:25px;

  height:25px;

  top:37.5px;

  left:87.5px;

  background:#fff;

  -webkit-border-radius:50%;

  -moz-border-radius:50%;

  -o-border-radius:50%;

  border-radius:50%;

  }

  再次运行,效果如下图所示:

添加两个小圆点

#p#分页标题#e#

  细心的朋友可能会发现一个瑕疵,在八卦图的正下方,白色小圆和白色大半圆的衔接不是那么光滑,好像凸起来了一点点,这其实是大半圆那两个像素的边框所引起的,要修正这个小“bug”,我们不妨让半圆的高度减小两个像素吧,与此同时,半圆的宽度也应该减小1像素。

  .semi-circle-left{

  /*其它样式代码省略*/

  width:99px;

  height:198px;

  }

  .semi-circle-right{

  /*其它样式代码省略*/

  width:99px;

  height:198px;

  }

  运行效果如下图所示:

最终效果

  这样,一个标准的乾坤八卦图就绘制完成了。

  据说在古代,八卦图是除凶避灾的常用图案,又据说在现代,Web设计师最大的灾难就是无休止的加班。小编希望通过这篇八卦图教程,祝愿各位Web设计师日后都能在正常的工作时间内,完成老板交付给你们的任务。

 

    关键字:

天才代写-代写联系方式