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

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>

使用一个div元素完成太极阴阳图，要点| ：before、：after伪对象和box-shoadow阴影的使用。

<style>
#taiji{
position:absolute;
width:0px;
height:300px;
box-shadow:0 0 100px #000;
border-left:150px solid #fff;
border-right:150px solid #000;
border-radius:100%;
}
#taiji:before{
content:"; ";
position:absolute;
left:-25px;top:50px;
width:50px;height:50px;
border-radius:100%;
background:#000;
box-shadow:0 0 0 50px #fff ;
}
#taiji:after{
content:"; ";
position:absolute;
left:-25px;top:200px;
width:50px;height:50px;
border-radius:100%;
background:#fff;
box-shadow:0 0 0 50px #000 ;
}
</style>
<div id="taiji" ></div>

本文来自 rtian001 的CSDN 博客，全文地址请点击：https://blog.csdn.net/rtian001/article/details/48686353?utm_source=copy

更多专业前端知识，请上【猿2048】www.mk2048.com

【DIV CSS】代码作业练习DIV CSS太极阴阳图相关推荐

【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
用css实现一个太极阴阳图，使用多个div块实现
用css实现一个太极阴阳图,使用多个div块实现下面是HTML代码 <!DOCTYPE html> <html lang="en"> <head&g ...
Java绘制太极阴阳图
用Java语言绘制的太极阴阳图,没有精确的坐标,所以没有标准的中心对称,仅供参考. 示例代码如下: import java.awt.Font; import java.awt.Graphics; im ...
Tweetable Mathematical Art 太极阴阳图
从Matrix67 blog里面看到了Tweetable Mathematical Art. 使用C++实现3个函数RD(i, j), GR(i, j), BL(i, j)分别返回像素(i, j)的R ...
css 横线_CSS-画一个太极阴阳图
先来看一下最终展示接下来一步步实现它第一步写一个HTML文件,内容只需要一个<div>标签,给一个类为"taiji" <!DOCTYPE html> ...
css布局作业：京东首页轮播图
效果: html代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
html表格垂直居中的CSS代码,使用3行CSS代码使任何元素垂直居中
在页面设计中,使元素水平居中是比较简单的事情.但是如何使元素垂直居中呢?其实,我们通过3行CSS代码(不包括添加浏览器厂商所需的代码)就可以使任何元素垂直居中.秘诀就是使用transform: tra ...
html css绘制太极,css画太极阴阳图
前言:道生一,一生二,二生三,三生万物今天,我们来聊聊如何用 CSS 实现太极图? 在网上可以找到很多资料,不过我强推荐一个css酷炫效果的网站,我们要实现一个阴阳图,谷歌搜索关键词:css t ...
背景的css代码,创建炫酷 CSS 背景效果的 10 个代码片段
在现代网页设计中,大背景图设计非常流行.随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕. 为什么? 因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容. ...

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

【DIV CSS】代码作业练习DIV CSS太极阴阳图相关推荐

最新文章

热门文章