日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
從青銅到王者，10個css3偽類使用技巧和運用-創(chuàng)新互聯(lián)

偽類經(jīng)常與偽元素混淆，偽元素的效果類似于通過添加一個實際的元素才能達到，而偽類的效果類似于通過添加一個實際的類來達到。實際上css3為了區(qū)分兩者，已經(jīng)明確規(guī)定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。偽類與偽元素的本質(zhì)區(qū)別就是是否抽象創(chuàng)造了新元素。具體的偽類和偽元素相關(guān)知識本文就不深入，下面介紹一下從青銅到王者10個css3偽類使用技巧和運用。

創(chuàng)新互聯(lián)是一家專業(yè)提供澤州企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為澤州眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進行中。

青銅-1、偽類實現(xiàn)盒子陰影

眾所周知，Animate/transition box-shadow 可以使用 box-shadow屬性 來實現(xiàn)盒子陰影效果，但repaint消耗較多，于是這里提出 通過修改偽元素的透明度來實現(xiàn)盒子陰影

實現(xiàn)原理：

**通過改變透明度，這樣從一個非默認值更新它的值，就不需要承擔(dān)任何重繪

這里設(shè)置一個空的偽元素設(shè)置陰影透明度為0隱藏，再通過鼠標懸?；謴?fù)它的透明度，下面是傳統(tǒng)和偽類實現(xiàn)的代碼對比


    
Before

    
Animate/transition box-shadow 可以使用box-shadow屬性來實現(xiàn)盒子陰影效果，但重繪消耗較多
      

After

    

通過修改偽元素的透明度來實現(xiàn)同樣的效果,沒有重繪消耗

.before {
    padding: 1em;
    background-color: #fff;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.before:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.after {
    position: relative;
    padding: 1em;
    background-color: #fff;
}
.after:before {
    content: "";
    position: absolute;  
    top: 0;
    right: 0;
    bottom: 0;  
    left: 0;
    z-index: -1;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    will-change: opacity;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.after:hover:before {
    opacity: 1;
}
從青銅到王者，10個css3偽類使用技巧和運用

標題名稱：從青銅到王者，10個css3偽類使用技巧和運用-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://www.dlmjj.cn/article/doggii.html