仿Windows10 Groove音乐播放器专辑鼠标指向效果

首先看下Groove的指向效果

效果分析

1. 当鼠标指向时，图片底部出现阴影，但这个阴影是带颜色的，是图片的下面部分
2. 出现2个图标，一个播放，一个添加
3. 图标指向时背景变大，而icon不变

实现思路：

1. 底部的阴影

利用css3的模糊滤镜 blur 进行模糊，然后用 translate 进行下移，当鼠标指向时进行显示就行了

2. 按钮

两个按钮各用一个元素 span，背景和图标用伪类 :before :after 实现，这样鼠标指向放大的时候就可以单独放大背景了

细节处理：

1. 背景模糊直接用blur的话，出来的效果会显得比较突兀，跟原图的颜色差别不大，没有层次感。设置饱和度 saturate 并降低透明度 opacity 得以解决。
2. 由于模糊的值比较大，导致图片两边都进行了延伸，所以采用 scaleX 把阴影进行横向“压缩”
3. 图标的出现加上动画延迟 transition-delay ，实现逐个出现
4. Groove的图标是透明的黑色背景，这样就太简单了。自己加点料，再处理一下：将背景模糊掉，实现类似Mac下的模糊透明效果，或者windows的Project NEON高斯模糊（截至目前，微软自带应用已经很大部分采用了，当然按钮这里没用上）。css里有个属性 backdrop 可以实现，但截止目前，只有最新的Safari（移动端、桌面端均）完美支持了，而最新的Chrome 62仍未完美支持（需要手动开启实验性~功能，而且开启后还有各种BUG），但filter的blur已经完美支持了，于是用filter进行模拟吧，这是就涉及到被模拟的图片的定位计算

最终效果

完整代码

HTML：

<ul>
    <li><a href=""><img src="1.jpg" alt=""></a>未知美女</li>
    <li><a href=""><img src="2.jpg" alt=""></a>未知美女</li>
    <li><a href=""><img src="3.jpg" alt=""></a>未知美女</li>
</ul>

JS：

$('ul a').each(function () {
    var img = $(this).html();
    $(this).append(img + '<span class="btn btn1">'+ img +'</span><span class="btn btn2">'+ img +'</span>');
});

LESS：

li{
    display: inline-block;
    margin: 20px;
    transition: 0.5s;
    font-size: 24px;
    text-align: center;
    a{
        display: block;
        position: relative;
        &:hover{
            img{
                &:nth-of-type(2){
                    opacity: 1;
                }
            }
            &:after{
                display: block;
            }
            .btn{
                transform: scale(1);
                opacity: 1;
            }
        }
        img{
            transition: 0.5s;
            border-radius: 10px;
            &:nth-of-type(1){
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
            }
            &:nth-of-type(2){
                opacity: 0.5;
                transform: translate(0, 10px) scaleX(.9);
                filter: blur(20px) saturate(180%);
                opacity: 0;
            }
        }
        .btn{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            position: absolute;
            z-index: 20;
            overflow: hidden;
            top: 50%;
            left: 50%;
            margin: -30px 0 0 -30px;
            opacity: 0;
            transform: scale(.5);
            transition: 0.2s;
            &1{
                margin-left: -70px;
                &:hover{
                    margin-left: -75px;
                }
                &:before{
                    background: url('./zoom.png') 50% 50% / contain no-repeat;
                }
                img{
                    margin-left: -25px;
                }
            }
            &2{
                margin-left: 10px;
                transition-delay: .1s;
                &:hover{
                    margin-left: 5px;
                }
                &:before{
                    background: url('./more.png') 50% 50% / contain no-repeat;
                }
                img{
                    margin-left: -110px;
                }
            }
            &:hover{
                width: 70px;
                height: 70px;
                margin-top: -35px;
                &:before{
                    opacity: 1;
                }
            }
            img{
                filter: blur(20px);
                position: absolute;
                top: -70px;
            }
            &:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: 0.5;
                z-index: 20;
            }
            &:before{
                content: '';
                position: absolute;
                width: 20px;
                height: 20px;
                top: 50%;
                left: 50%;
                margin: -10px 0 0 -10px;
                z-index: 30;
                transition: 0.3s;
            }
        }
    }
}