【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

最新推荐文章于 2024-05-25 11:42:31 发布

rtian001

最新推荐文章于 2024-05-25 11:42:31 发布

阅读量6.6k

点赞数 1

分类专栏： WEB前端

本文链接：https://blog.csdn.net/rtian001/article/details/48686353

版权

WEB前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. DIV + CSS 练习：太极阴阳图。
基本思路：由三个div块元素组成；
#taiji太极阴阳图底面
#yin太极阴阳图阴面小圆
#yang太极阴阳图阳面小圆
（太极阴阳图：上为阳下为阴或左为阳又为阴）

2. 太极阴阳图底图#taiji：
巧用边框：宽度0高度300px，左右边框150分别150px；然后圆角处理作圆形。
#taiji{
margin:auto;
width:0;
height:300px;
border-left:150px solid #fff;
border-right:150px solid #000;
box-shadow: 0 0 20px 0 #333;
border-radius:100%;
}
3. 阴阳小圆，两个眼分别用伪属性:before或:after一个做小圆眼。

#yin{
width:150px;
height:150px;
border-radius:100%;
background:#000;
}
#yin:after{
position:absolute;
content:" ";
width:50px;
height:50px;
border-radius:100%;
background:#fff;
}
4. 定位组合，效果如图：

5. 全部代码：

 <!DOCTYPE html>
 <html>
 <head>
  <title> 飛天网事--DIV+CSS代码阴阳太极图 </title>
  <meta charset="utf-8" />
  <meta name="description" content="飛天网事，WEB前端开发，纯css3代码时钟精彩案例" />
  <meta name="keywords" content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，" />
  <meta name="author" content="R.tian @eduppp.cn 2015">
  <link rel="shortcut icon"  href="http://eduppp.cn/images/logo4.gif" />
  <link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" />
 </head>
 <body>
 <style type="text/css">
  #taiji{
  margin:auto;
  width:0;
  height:300px;
  border-left:150px solid #fff;
  border-right:150px solid #000;
  box-shadow: 0 0 20px 0 #333;
  border-radius:100%;
  }
  #yin{
  position:absolute;
  margin:150px 0 0 -75px;
  width:150px;
  height:150px;
  border-radius:100%;
  background:#000;
  }
  #yin:after{
  position:absolute;
  margin:50px 0 0 50px;
  content:" ";
  width:50px;
  height:50px;
  border-radius:100%;
  background:#fff;
  }
  #yang{
  position:absolute;
  margin:0 0 0 -75px;
  width:150px;
  height:150px;
  border-radius:100%;
  background:#fff;
  }
  #yang:after{
  position:absolute;
  margin:50px 0 0 50px;
  content:" ";
  width:50px;
  height:50px;
  border-radius:100%;
  background:#000;
  }
 </style>
 <div id="taiji">
  <div id="yin"></div>
  <div id="yang"></div>
 </div>
 </body>
 </html>

rtian001

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

1. DIV + CSS 练习：太极阴阳图。基本思路：由三个div块元素组成； #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆（太极阴阳图：上为阳下为阴或左为阳又为阴） 2. 太极阴阳图底图#taiji：巧用边框：宽度0高度300px，左右边框150分别150px；然后圆角处理作圆形。
复制链接

扫一扫