CSS mask-image 实现边缘淡出过渡效果

/* 定义一个带有淡出过渡效果的遮罩层样式 */
.masked-out-transition {
    /* 应用遮罩效果 */
    -webkit-mask-image: linear-gradient(to right, transparent 20%, black 30%), url('mask-image.png');
    mask-image: linear-gradient(to right, transparent 20%, black 30%), url('mask-image.png');
    
    /* 使用动画以达到过渡效果 */
    -webkit-mask-size: 80% 100%, 100% 100%;
    mask-size: 80% 100%, 100% 100%;
    
    /* 动画持续时间 */
    -webkit-animation: mask-transition 2s infinite alternate;
    animation: mask-transition 2s infinite alternate;
}
 
/* 定义动画 */
@-webkit-keyframes mask-transition {
    from {
        -webkit-mask-size: 20% 100%, 100% 100%;
    }
    to {
        -webkit-mask-size: 80% 100%, 100% 100%;
    }
}
@keyframes mask-transition {
    from {
        mask-size: 20% 100%, 100% 100%;
    }
    to {
        mask-size: 80% 100%, 100% 100%;
    }
}

这段代码展示了如何使用CSS的mask-image属性和关键帧动画来创建一个图片边缘淡出的过渡效果。.masked-out-transition类被应用到一个元素上，使得该元素的图片边缘会不断地由透明到黑色的过渡效果出现，从而模拟出淡出的动画。这个过渡效果可以被用来制作例如新闻滚动条、导航栏切换等视觉效果。