51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

【CSS3】纯CSS代码实现太极阴阳图

时间:2017-08-11 09:45点击:
 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>  


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开