[分享]css3实现水效果

CSS3是一种用于网页排版和样式修饰的技术，它增强了CSS2的能力，提供了更多的样式效果，其中包括水效果。

/* CSS3 water effect */
.water {
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.water:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(to bottom left, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2));
    opacity: 0;
    transition: all .5s;
}
.water:hover:before {
    opacity: 1;
} 

上述代码使用了伪元素:before来创建水效果。首先，我们设置了外层容器.water的样式，使其相对定位、内联块级元素且溢出隐藏。然后，我们使用:before伪元素创建一个遮罩层，它将以线性渐变的方式将透明白色和透明黑色叠加，以产生透明度逐渐降低的感觉。

我们通过将透明度设置为0来隐藏遮罩层，而在:hover伪类下将遮罩层透明度设置为1来显示水效果。这里我们还设置了一个过渡效果，让水效果呈现平滑的渐变。

总之，CSS3提供了丰富的样式效果，使得我们能够更加轻松地为网页增添炫酷的效果。水效果就是其中之一，它可以为你的页面增添一份灵动和生动感。