图片叠加科幻切换 -- css
<template>
<div>
<div class="a"></div>
<div class="b"></div>
</div>
</template>
<style lang="scss">
$img2: 'http://up.enterdesk.com/edpic_source/21/00/00/210000f8e772d7fc0758e67ae4b48807.jpg';
$img1: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';
$count: 360;
div {
position: absolute;
top:0;
left: 0;
width: 100vw;
height: 100vh;
}
.a {
background: url($img1);
background-size: 100% auto;
}
.b {
background: url($img2);
background-size: 100% auto;
mask-image: linear-gradient(0, rgba(0, 0, 0, 1) 40%, transparent 60%);
mask-image-position: 50% 50%;
animation: move 10s infinite;
}
@keyframes move {
@for $i from 0 through $count {
#{$i / $count * 100}% {
mask-image: linear-gradient($i / $count * 360deg, rgba(0, 0, 0, 1) 40%, transparent 60%);
}
}
}
</style>
![](https://img2020.cnblogs.com/blog/1992581/202112/1992581-20211230163429113-999549947.png)
转自: https://csscoco.com/inspiration/#/./background/bg-mask-image.md