[分享]css3实现波动的水纹

CSS3可以实现许多美丽的效果，其中就包括波动的水纹效果。

.water {
    position: relative;
    height: 200px;
    width: 300px;
    background-color: #0392E1;
    overflow: hidden;
}

.water:before{
    content: "";
    display: block;
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 10%;
    right: 10%;
    background-image: radial-gradient(circle, #FFF 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 5);
    opacity: 0;
    filter: alpha(opacity=50);
    transition: transform 0.5s, opacity 1s;
}

.water:hover:before{
    transform: scale(20, 10);
    opacity: .5;
    filter: alpha(opacity=100);
} 

代码中的water类包含一个before伪元素，它的位置是相对于water类定位。它的样式中使用了渐变的圆形背景，这就是水纹的形状。其中 #FFF 10%是白色，表示水纹的中心。transparent是透明色。scale()方法可以调整水纹的大小，transform属性可以实现变形的效果。opacity和filter实现水纹的透明度效果。transition属性可以让水纹有动态的变化效果。当鼠标移动到water类上面时，水纹就会变大变亮，变得更加真实。

这样，我们就可以使用CSS3来给我们的网站添加美丽的水纹效果了。不妨试一试。