用CSS實(shí)現(xiàn)太極圖
之前有看別人用CSS實(shí)現(xiàn)太極圖，寫(xiě)了老長(zhǎng)的代碼。
不過(guò)第一次見(jiàn)的時(shí)候，還是覺(jué)得挺好玩的。
CSS如下(效果預(yù)覽):
#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;
}
如果上面的代碼，你看著還有問(wèn)題，那需要補(bǔ)補(bǔ)CSS了
用HTML實(shí)現(xiàn)太極圖
不過(guò)我發(fā)現(xiàn)用html實(shí)現(xiàn)這個(gè)太極圖，只需要一行代碼
代碼如下(效果預(yù)覽):
<span class="Sail">?</span>
** 這是什么原理呢？**
這個(gè)叫做Unicode字符。
使用Unicode字符，需要在meta標(biāo)簽中將charset屬性值設(shè)為utf-8
使用字符
- 一、工作量更加少
- 二、是響應(yīng)的
- 三、不需要像使用其他icon那樣引入文件，頁(yè)面性能更高
- 四、Unicode字符，實(shí)現(xiàn)了一萬(wàn)多種不同的字符
** 很多工作別人已經(jīng)幫我們做好了，只是我們不知道。**
** 本文已經(jīng)更新在我的個(gè)人博客 ,歡迎訪問(wèn)**
** 未經(jīng)授權(quán)，禁止轉(zhuǎn)載**
