实现同心圆遮罩渐变显示、隐藏特效

今天在做网站过程中，发现了一种新的特效，在这里记录分享一下。

给图标加上遮罩，鼠标浮动到图标所在圆时蓝色遮罩从圆心逐渐显现，移出鼠标时遮罩从圆周逐渐收缩到圆心消失。

实现原理：css3中，transform:scale(x,y)可以实现2D 缩放转换，而当x=y时，它们的横纵方向缩放比例一致。

当x=y=0时，即transform:scale(0)可实现图像隐藏效果：

当x=y=1时，即transform:scale(1)可实现图像显示效果：

遮罩显现时，部分css代码如下：

.service-box:hover .icon:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.service-box .icon:before {
    color: #fff;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    background: #00a3e4;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    transition: all 0.3s ease 0s;
}

 

总结：可以通过transform:scale(0)；transform:scale(1)；实现同心圆遮罩显示、隐藏特效。