效果示例

思路过程

这不是刚学前端没多久嘛，想弄个图片淡入淡出的效果，就去网上搜了下，有，但是很麻烦，我就想能不能用已学的一些基础，来达到“伪图片淡入淡出”的效果，于是我苦思冥想

诶！有了！

其实就是定义两个盒子，一个盒子有图，另一个空白。

<div class="b1">
    <img src="img/123.jpg" alt="">
</div>
<div class="b2"></div>

然后让两个盒子重叠，用Z-index设定一下元素的堆叠顺序。

.b1 {
    position: absolute;
    width: 300px;
    height: 300px;
    z-index: 1;
}

.b2 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: white;
            z-index: 2;
            animation: immove 2s linear;
}

再让空白盒子移动，看上去像是图片移动了一样。

@keyframes immove {
    0% {
        transform: translateY();
    }
    
/*通过调整translate来调整上下左右移动*/

    100% {
    transform: translateY(+100%);
    }
}

延伸

这是基础，适用于纯色背景，那如果是复杂背景呢？

我们可以将b2换成一张背景图的裁剪，然后利用利用overflow: hidden，将b2移动后溢出的盒子被隐藏。

当然只是想法啦，后续的前端学习大抵会有更简便的方法，但我想，能利用目前所学的有限创造无限

才是编程的魅力呀