CSS3的動畫非常強大，但是平時寫的並不多，這里，記錄一個CSS3實現水波紋的效果
實現代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水波紋效果</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
@-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: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid yellow;
}
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="water1"></div>
<div class="water2"></div>
<div class="water3"></div>
<div class="water4"></div>
</div>
</body>
</html>
為了兼容低版本google瀏覽器，需要加-webkit-前綴，特別是定義幀動畫時，很容易被忽略，@-webkit-keyframes
自適應的寬高相等的div的實現：不設置寬高，直接用百分比的padding填充，（因為百分比都是相對於父級的width）
幀動畫超過兩幀時，每幀節點出現了停頓，暫時的解決辦法：只留兩幀