卡卡網(wǎng)

前面曾介紹過(guò)512個(gè)CSS圖標(biāo)形狀(icon shape)，今天再推薦一下，用純CSS偽元素創(chuàng)建的84個(gè)小圖標(biāo)。

demodownload

使用介紹

CSS

先引用CSS文件，樣式全部寫在一個(gè)default.css的樣式文件里。

<link rel="stylesheet" href="default.css">

HTML

<ul>
  <li class="search"><a href="#non">Search</a></li>
</ul>

這是一個(gè)搜索小圖標(biāo)，使用ul容器，li標(biāo)簽的class類值為小圖標(biāo)的偽元素類名。搜索(search)小圖標(biāo)偽元素CSS為：

.search a:before {
    width:6px;
    height:6px;
    border:3px solid #c55500;
    background:transparent;
    /* css3 */
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
}

.search a:after {
    left:10px;
    width:3px;
    height:7px;
    margin-top:0;
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.search a:hover:before,
.search a:focus:before,
.search a:active:before {
    border-color:#730800;
    background:transparent;
}

.search a:hover:after,
.search a:focus:after,
.search a:active:after {
    background:#730800;
}

使用注意問(wèn)題

本實(shí)例的偽元素，是a鏈接標(biāo)簽的偽元素，需要與a標(biāo)簽一起使用，即是說(shuō)不能單獨(dú)使用這些圖標(biāo)，與前面介紹的512個(gè)CSS圖標(biāo)形狀(icon shape)不同，CSS圖形形狀并不需要與某個(gè)標(biāo)簽元素關(guān)聯(lián)使用。

您可能對(duì)以下文章也感興趣

• 收藏！44個(gè)CSS3制作的形狀圖形(shape)
• 512個(gè)CSS圖標(biāo)形狀(icon shape)

標(biāo)簽: 偽元素  CSS圖標(biāo)  css-icon