用伪元素做图片的底部阴影效果

我司的 UI 虽然不是处女座，但认（挑）真（剔）程度也与之不相上下了。作为一枚前端，当然也不好意思掉链子，所以在 UI 小哥的督促下，会最大可能地完美实现视觉稿。于是乎，一些本来一行实现的东西，为了效果美观，会用更多代码做得更加细致。

上效果：
这里写图片描述

UI 要求是，底部阴影宽度比图片的宽度略小，然后整体是个轮播效果，每张图片的阴影颜色不一样。

假设图片的容器为banner, 为了减少html上的节点，尽量用伪元素来做。由于层级嵌套的关系，不能直接把图片盖在阴影上，所以要有两个伪元素，一个before用于生成阴影，一个after用于放背景图片。后者的z-index要高于前者。

按这个思路写mixin

@mixin banner($shadowcolor,$bannerpic){
    width: 92%;
    height: 32vw;
    margin:0 auto;
    border-radius: 8px;
    position: relative;
    &::before{
        @include pse;
        @include hori--center;
        bottom:0;
        width: 94%;
        height: 85%;
        -webkit-box-shadow:0px 1px 20px 6px #{$shadowcolor};
        box-shadow: 0px 1px 20px 6px #{$shadowcolor};

    }
    &::after{
        @include pse;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
        border-radius: 8px;
        @include differentbg($bannerpic);
        z-index: 10;
    }
}

这里又引用了一个 differentbg 的mixin，这是用于在不同分辨率的屏幕下显示不同大小的图片的。具体如下

@mixin differentbg($bgname){
    @include bg($bgname + '--s');
    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi){
        @include bg($bgname + '--l');
    }
}

好吧，这里又引用了一个bg 的 mixin，具体是这样

@mixin bg($file) {
    background: url('../images/#{$file}.png') no-repeat center;
    background-size: cover;
}

mixin写的比较多，哈哈哈~~
总之就是这样咯，UI看过后傲娇地表示，阔以！

用伪元素做图片的底部阴影效果

猜你喜欢