一個絢麗多彩的頁面,少不了頁面中各種各樣的效果組成,頁面中的效果除了html里面的布局組成,還需要css中的各種屬性等。譬如,頁面中的一些常見的效果可以用偽類來實現(xiàn)。而偽類和偽元素看起來又很相似,偽類和偽元素的區(qū)別,偽類和偽元素都可以用來設(shè)置對象的內(nèi)容,表示偽類對象,不過在語法上,偽類是前面加一個冒號,偽元素是前面加兩個冒號,偽元素是所設(shè)置的元素的新創(chuàng)建的子元素,屬于虛擬元素,而偽類是只有觸發(fā)條件才看到的。
頁面中一些用偽類實現(xiàn)的常見效果有很多,譬如:設(shè)置偽類:after來實現(xiàn)做出一個提示框中的三角箭頭,效果如下圖:
Css的樣式如下圖:
這個效果是使用偽類根據(jù)三角形的指向設(shè)置三條邊框的顏色,大小的,而指向的那方向的邊框無需設(shè)置。其中兩條邊框的顏色設(shè)置為透明,余下的那條設(shè)置的邊框顏色與箭頭里的顏色一致。然后再設(shè)置位置的定位的偏移值。如果不想設(shè)置邊框的,可以設(shè)置一張背景圖片。
也可以使用偽類設(shè)置關(guān)于邊框的動畫效果,鼠標(biāo)懸停時邊框顏色改變,而從中間像兩邊移動,效果如下圖,分別是懸停之前的樣式,懸停過程中的樣式,最后懸停時的樣式。
Css的樣式如圖:
還有在頁面中很常見的盒子陰影,也可以用設(shè)置偽類的透明度來實現(xiàn),先設(shè)置盒子的陰影、設(shè)置透明度為0,鼠標(biāo)懸停時,透明度設(shè)置為1,效果如下圖示:
網(wǎng)頁標(biāo)題:網(wǎng)站前端頁面制作中常用的偽類效果
文章起源:http://m.rwnh.cn/news/246278.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、App開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)頁設(shè)計公司、定制網(wǎng)站、全網(wǎng)營銷推廣
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)