驾驶舱地图 渐变遮罩层
<div class="mask">
<div class="left-mask"></div>
<div class="right-mask"></div>
</div>
.mask {
pointer-events: none;
position: absolute;
width: 100%;
top: 1rem;
bottom: 0;
background: linear-gradient(
rgba(0, 37, 65, 0.9) 0%,
rgba(0, 0, 0, 0) 2rem,
rgba(0, 0, 0, 0) calc(100% - 2rem),
rgba(0, 37, 65, 0.5)
);
.left-mask,
.right-mask {
transition: opacity 0.5s linear;
position: absolute;
width: 5rem;
height: 100%;
background: rgba(0, 12, 23, 1);
filter: blur(2.4rem);
}
.left-mask {
// transform: translateX(-50%);
left: 0;
background: linear-gradient(
90deg,
rgba(0, 37, 65, 0.8) 2.1%,
rgba(0, 37, 65, 0.4) 100%
);
}
.right-mask {
// transform: translateX(50%);
right: 0;
}
}