css偽類

下面是自己使用過 偽類的幾種場景

:last-child

利用 css:last-child，實(shí)現(xiàn)循環(huán)四個(gè)元素，每一個(gè)元素都有底邊框，但最后一個(gè)元素沒有

1. 注意 xx:last-child 找到有共同父節(jié)點(diǎn)樣式為xx 的元素
2. 再選定最后一個(gè)元素，該元素必須處在最后一位，且不能有其他不相關(guān)元素

比如復(fù)雜一點(diǎn)的形式：

<view>
    <view class="xx">
        <text>tt</text>
        <view class='yy'>bb</view> 
    </view>

    <view class="xx">
        <text>tt</text>
        <view class='yy'>bb</view> 
    </view>

    <view class="xx">
        <text>tt</text>
        <view class='yy'>bb</view> 
    </view>
<view>

css 代碼應(yīng)該這樣寫，

.xx .yy {
    border: 1rpx solid #a7a7a7;
    border-width: 0 0 1rpx 0;
}

.xx:last-child .yy {
    border-width: 0;
}

:nth-child(3n+2)

利用 :nth-child(3n+2) 實(shí)現(xiàn)一個(gè)九宮格，用于展示圖片。實(shí)現(xiàn)效果如下，

九宮格.png

頁面利用flex 布局，標(biāo)簽代碼

<view class='activities'>
    <view wx:for='{{starActivity}}' wx:key='postId' class='activity'>
        <image class='img-activity' src='xx' mode='aspectFill'></image>
        <xx></xx>
        <xx></xx>
    </view>
    
</view>

.activities {
    width: 750rpx;
    padding: 30rpx;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.activity {
    width: 32%;
    height: 226rpx;
    margin-bottom: 15rpx;
    border: 1rpx solid #eee;
    box-sizing: border-box;
}

.activity:nth-child(3n+2){
    margin-left: 15rpx;
    margin-right: 15rpx;
}

.activity .img-activity{
    width: 100%;
    height: 100%;
}

注意，img-activity 寬高設(shè)置為 100%，是指子元素 內(nèi)容寬高==父元素 內(nèi)容寬高，至于內(nèi)容寬高指什么，是由box-sizing 值確定的（默認(rèn)值 content-box)。

1. box-sizing: border-box 設(shè)置的width/height == 內(nèi)容寬高 + padding + border
2. box-sizing: content-box 設(shè)置的width/height == 內(nèi)容寬高

在這里 activity 的內(nèi)容寬高 = wh - (padding + border)， 所以img wh = 226rpx - 1rpx

css 動畫

很多時(shí)候頁面要添加動畫，優(yōu)化用戶體驗(yàn)，可以利用css 語法支持實(shí)現(xiàn)。css 動畫，不是瞬間變動，而是有個(gè)緩動效果，實(shí)現(xiàn)效果

animation1.gif

實(shí)現(xiàn)效果，需要在點(diǎn)擊后給元素添加一個(gè)樣式修飾，下次點(diǎn)擊又重現(xiàn)效果，類似 xx:hover。微信小程序元素（view/button）的 hover-class 剛好支持。實(shí)現(xiàn)如下

<view class="action-sort-mount" hover-class='scale'>
    <image class="user-like img-WH" src="{{isLike?'/images/like_on.svg':'/images/like.svg'}}" />
    <text class='text1'>{{xx}}</text>
</view>

.scale {
    animation: 0.3s myScale;
}

@keyframes myScale {
    from {
        transform: scale(0.5, 0.5);
    }

    to {
        transform: scale(1, 1);
    }
}

transform: translate(x, y)

利用 transform: translate(x, y) 實(shí)現(xiàn)一張 圖片在底下一張圖片（寬高未知）居中的效果，

圖片中心居中.png

步驟如下，

<view class='video-one-poster-icon'>
    <image class='video-one-activity' src='{{xx}}' mode="aspectFill"/>
    <view class='bg'></view>  
    <image class='video-icon' src='/images/video-icon.svg' />
</view>


.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0.3;
}

.video-icon{
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

善于利用 transform 改變元素大小，移動位置。

css 加邊框

利用css 給元素加上邊框，可以利用下面兩種方式實(shí)現(xiàn)

1. border 屬性，設(shè)定邊框?qū)挾?，假設(shè)要實(shí)現(xiàn)上下邊框

border: 1rpx solid rgba(0, 0, 0, 0.15);
border-width: 0rpx 0rpx 1rpx 0rpx;

2. 設(shè)置 box-shadow ， 陰影矩形會往上下移動 1rpx

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴(kuò)散半徑 | 陰影顏色 */
<!-- 這個(gè)元素陰影盒子的偏移，正負(fù)含義類似 定位的left/top-->
box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);

<!-- 把陰影延y 軸下移1rpx  -->
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15)

css 加蒙版

1. 濾鏡、透明度實(shí)現(xiàn)給元素加一層 蒙版

<!-- 透明度 -->
opacity: 0.7

<!-- 濾鏡-->
filter: grayscale(50%)

這就是一些關(guān)于學(xué)習(xí)css 的體會，歡迎大家給我留言，提建議，指出錯(cuò)誤，一起討論學(xué)習(xí)技術(shù)的感受！