传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 前端教程 特效教程 查看内容

栏目导航

≡CSS特效≡

≡JavaScript特效≡

≡jQuery特效≡

CSS3绘制太极图代码实例详解

2017-6-20 17:12| 发布者: admin| 查看: 2065| 评论: 0|来自: 蚂蚁部落

传智播客
分享一段代码实例,它实现了绘制太极图的功能。

后面并详细给出太极图的实现过程。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body {
  background: #999;
}
.radius {
  border-radius: 50%;
}
.lg-radius1 {
  width: 200px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  border-left: 200px solid #000;
}
.lg-radius2 {
  width: 200px;
  height: 400px;
  border-right: 200px solid #fff;
  position: absolute;
  right: 0;
  top: 0;
}
.md-radius1 {
  width: 100px;
  height: 200px;
  position: absolute;
  z-index: 3;
  left: -100px;
  top: 0;
  border-left: 100px solid #FFF;
}
.md-radius2 {
  width: 100px;
  height: 200px;
  position: absolute;
  z-index: 3;
  left: -100px;
  bottom: 0;
  border-right: 100px solid #000;
}
.sm-radius1 {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 5;
  left: -28px;
  top: 19%;
  background: #000;
}
.sm-radius2 {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 5;
  left: -28px;
  bottom: 19%;
  background: #fff;
}
</style>
</head>
<body>
  <div class="lg-radius1 radius">
    <div class="sm-radius2 radius"></div>
    <div class="sm-radius1 radius"></div>
    <div class="md-radius2 radius"></div>
    <div class="md-radius1 radius"></div>
    <div class="lg-radius2 radius"></div>
  </div>
</body>
</html>

上面的代码实现了太极图的效果,下面介绍一下它的实现过程。

一.代码注释:

[CSS] 纯文本查看 复制代码
body {
  background: #999;
}

设置body元素的背景颜色,也就是我们所看到的灰色。

[CSS] 纯文本查看 复制代码
.radius {
  border-radius: 50%;
}

代码可以设置元素为圆角,这里之所以单独设置一个class类,是为了提高代码复用。

[CSS] 纯文本查看 复制代码
.lg-radius1 {
  width: 200px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  border-left: 200px solid #000;
}

这个实现了太极图的左半部分的黑色区域,其实绘制的也是一个整圆,只不过没有背景色而已。

代码演示如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body {
  background: #999;
}
.radius {
  border-radius: 50%;
}
.lg-radius1 {
  width: 200px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  border-left: 200px solid #000;
  background-color:red;
}
</style>
</head>
<body>
  <div class="lg-radius1 radius">
  </div>
</body>
</html>

为了便于观察,我们将元素背景色设置为红色,效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/02/171427wnvyfovyllv7lfcc.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

具体原理可以参阅border-radius带border边框情况一章节。

[CSS] 纯文本查看 复制代码
.lg-radius2 {
  width: 200px;
  height: 400px;
  border-right: 200px solid #fff;
  position: absolute;
  right: 0;
  top: 0;
}

这是太极图的右半部分,和上面的左边部分实现原理是一样的。

它只是被嵌套在了lg-radius1元素之内,然后采用定位方式将其定位于右部。

[CSS] 纯文本查看 复制代码
.md-radius1 {
  width: 100px;
  height: 200px;
  position: absolute;
  z-index: 3;
  left: -100px;
  top: 0;
  border-left: 100px solid #FFF;
}

绘制了白色的中等大小的圆,绘制原理和上面大圆是相同的。

后面大多都是重复的内容,即便不重复也是非常的简单,就不再做介绍了。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:21 , Processed in 0.069934 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部