css 实现图片专场

<div>

</div>

</template>

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

巴特西