用CSS實現(xiàn)太極圖
之前有看別人用CSS實現(xiàn)太極圖，寫了老長的代碼。
不過第一次見的時候，還是覺得挺好玩的。
CSS如下(效果預覽):
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
如果上面的代碼秀又，你看著還有問題，那需要補補CSS了
用HTML實現(xiàn)太極圖
不過我發(fā)現(xiàn)用html實現(xiàn)這個太極圖贬芥，只需要一行代碼
代碼如下(效果預覽):
<span class="Sail">?</span>
** 這是什么原理呢吐辙？**
這個叫做Unicode字符。
使用Unicode字符蘸劈，需要在meta標簽中將charset屬性值設(shè)為utf-8
使用字符
- 一昏苏、工作量更加少
- 二、是響應的
- 三、不需要像使用其他icon那樣引入文件贤惯，頁面性能更高
- 四洼专、Unicode字符，實現(xiàn)了一萬多種不同的字符
** 很多工作別人已經(jīng)幫我們做好了孵构，只是我們不知道屁商。**
** 本文已經(jīng)更新在我的個人博客 ,歡迎訪問**
** 未經(jīng)授權(quán)，禁止轉(zhuǎn)載**
