css 实现background 过渡动画

示例如图: codepen

    <div class="box"> </div>

    .box {
        max-width: 400px; height: 200px;
        background: linear-gradient(to right, #fff, #fff);
        position: relative;
        z-index: 0;    
    }
    .box::before {
        content: '';
        position: absolute;
        left: 0; top: 0; right: 0; bottom: 0;
        background: linear-gradient(to right, #c1e3f7, #f2fcfe, #c1e3f7);
        opacity: 0;    
        transition: opacity .5s;
        z-index: -1;
    }
    .box:hover::before {
        opacity: 1;    
    }