横向滑动以及图片拼凑遮罩

css小记：横向滑动以及图片拼凑遮罩

横向滑动

效果：

html部分：

<ul class="precautions">
    <li class="precautions-block" v-for="(item, index) in 4" :key="index">
        <h4>注意事项标题{{index + 1}}</h4>
        <p>
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
        <div class="step">{{index + 1}}/4</div>
    </li>
</ul>

css部分:

.precautions{
    width:100%;
    display: inline;
    white-space: nowrap; // 不换行
    overflow-x: scroll; // 横向scroll
    float: left;
    overflow-y: hidden;
    margin-top: 0.3rem;
    .precautions-block{
        box-shadow: 0px 0.08rem 0.15rem #EAECF3;
        width: 6rem;
        padding: .1rem .3rem .6rem .3rem;
        background-color: #fff;
        margin-right: .3rem;
        position: relative;
        display:inline-block;
        white-space: normal; // 内部文字换行
        h4{
            margin: .4rem 0;
        }
        p{
            line-height: 1.5;
        }
        // 四分之一圆
        .step{
            background-color: #23498D;
            color: #f1f1f1;
            width: .6rem;
            height: .6rem;
            border-radius:100% 0 0 0;
            position: absolute;
            bottom: 0;
            right: 0;
            line-height: .6rem;
            text-align: center;
            font-size: .24rem;
        }
    }
}

拼凑示例遮罩

效果：

html部分：

<div class="mask" v-if="sample">
    <div v-for="(img, index) in 6" :key="index">
        <p>
            <img src="./@2x.png" v-if="img%2 !== 0">
        </p>
        <p>
            <img src="./pgjg@2x.png" v-if="img%2 === 0">
        </p>
    </div>
</div>

css部分：

.mask{
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, .5);
    div{
        height: 36%;
        width: 50%;
        display: inline-block;
        text-align: center;
        float: left;
        p{
            height: 50%;
            img{
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    }
}