服務(wù)熱線 400-660-5555 （轉(zhuǎn)1）
網(wǎng)站建設(shè)
服務(wù)熱線 400-660-5555 （轉(zhuǎn)1）
網(wǎng)站建設(shè)
一個(gè)絢麗多彩的頁(yè)面，少不了頁(yè)面中各種各樣的效果組成，頁(yè)面中的效果除了html里面的布局組成，還需要css中的各種屬性等。譬如，頁(yè)面中的一些常見(jiàn)的效果可以用偽類(lèi)來(lái)實(shí)現(xiàn)。而偽類(lèi)和偽元素看起來(lái)又很相似，偽類(lèi)和偽元素的區(qū)別，偽類(lèi)和偽元素都可以用來(lái)設(shè)置對(duì)象的內(nèi)容，表示偽類(lèi)對(duì)象，不過(guò)在語(yǔ)法上，偽類(lèi)是前面加一個(gè)冒號(hào)，偽元素是前面加兩個(gè)冒號(hào)，偽元素是所設(shè)置的元素的新創(chuàng)建的子元素，屬于虛擬元素，而偽類(lèi)是只有觸發(fā)條件才看到的。
頁(yè)面中一些用偽類(lèi)實(shí)現(xiàn)的常見(jiàn)效果有很多，譬如：設(shè)置偽類(lèi)：after來(lái)實(shí)現(xiàn)做出一個(gè)提示框中的三角箭頭，效果如下圖：Css的樣式如下圖：這個(gè)效果是使用偽類(lèi)根據(jù)三角形的指向設(shè)置三條邊框的顏色，大小的，而指向的那方向的邊框無(wú)需設(shè)置。其中兩條邊框的顏色設(shè)置為透明，余下的那條設(shè)置的邊框顏色與箭頭里的顏色一致。然后再設(shè)置位置的定位的偏移值。如果不想設(shè)置邊框的，可以設(shè)置一張背景圖片。
也可以使用偽類(lèi)設(shè)置關(guān)于邊框的動(dòng)畫(huà)效果，鼠標(biāo)懸停時(shí)邊框顏色改變，而從中間像兩邊移動(dòng)，效果如下圖，分別是懸停之前的樣式，懸停過(guò)程中的樣式，最后懸停時(shí)的樣式。
Css的樣式如圖：還有在頁(yè)面中很常見(jiàn)的盒子陰影，也可以用設(shè)置偽類(lèi)的透明度來(lái)實(shí)現(xiàn)，先設(shè)置盒子的陰影、設(shè)置透明度為0，鼠標(biāo)懸停時(shí)，透明度設(shè)置為1，效果如下圖示：Css的樣式如下圖：
添加動(dòng)力小姐姐微信
電話咨詢
400-660-5555 （轉(zhuǎn)1）
