css 实现图片专场

<template>

<div>

</div>

</template>

<style lang="scss">

html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

div {

    margin: auto;

    position: relative;

    width: 30vw;

    height: 70vh;

    background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2128480768,3645204276&fm=26&gp=0.jpg) no-repeat;

    background-size: cover;

   

    &::before {

        position: absolute;

        content: "";

        top: 0;left: 0; right: 0;bottom: 0;

        background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1877625006,2341162086&fm=26&gp=0.jpg) no-repeat;

        background-size: cover;

        z-index: 1;

        animation: maskRotate 4s ease-in-out infinite;

    }

}

@keyframes maskRotate {

    @for $i from 0 through 50 {

        #{$i}% {

            mask: linear-gradient(45deg, #000 #{$i * 2 + '%'}, transparent #{$i * 2.5 + '%'}, transparent #{$i * 2.5 + '%'});

        }

    }

    100% {

        mask: linear-gradient(45deg, #000， #000 100%);

    }

}

</style>

转自：https://csscoco.com/inspiration/#/./background/bg-mask-transition.md