不要沮丧，不必惊慌，做努力爬的蜗牛或坚持飞的笨鸟，我们试着长大，一路跌跌撞撞，然后遍体鳞伤。坚持着，总有一天，你会站在最亮的地方，活成自己曾经渴望的模样。
在逛一个技术博客的时候，发现了一个利用css动画实现水波纹效果的示例，虽然效果不咋得，但在一些特定的场景下还是可以用一用的，记录下来以后备用哦。
CSS实现水波纹效果的方法
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水波纹效果</title>
<style>
@-webkit-keyframes wateranimate {
0% {
-webkit-transform: scale(0);
opacity: 0.5;
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}
}
@keyframes wateranimate {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.5;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
.container {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto 10px auto;
background-color: #fbfbfb;
}
.water1 {
-webkit-animation: wateranimate 12s 9s ease-out infinite;
animation: wateranimate 12s 9s ease-out infinite;
}
.water2 {
-webkit-animation: wateranimate 12s 6s ease-out infinite;
animation: wateranimate 12s 6s ease-out infinite;
}
.water3 {
-webkit-animation: wateranimate 12s 3s ease-out infinite;
animation: wateranimate 12s 3s ease-out infinite;
}
.water4 {
-webkit-animation: wateranimate 12s 0s ease-out infinite;
animation: wateranimate 12s 0s ease-out infinite;
}
.water1, .water2, .water3, .water4 {
padding: 20%;
position: absolute;
left: 30%;
top: 30%;
border: 1px solid pink;
box-shadow: 0 0 120px 30px rgba(235, 31, 137, 1) inset;
border-radius: 100%;
z-index: 1;
opacity: 0;
}
.mochu{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="water1"></div>
<div class="water2"></div>
<div class="water3"></div>
<div class="water4"></div>
</div>
<div class="mochu"></div>
</body>
</html>
运行结果：
本文CSS如何实现水波纹的效果到此结束。一笔一画关乎成绩，一字一句决定人生。小编再次感谢大家对我们的支持！
![前端必须要掌握的几个CSS3的属性详解]("tuts.jpg)
![CSS3如何实现图片抽屉式效果的示例代码]("images/1.jpg)
