CSS3實(shí)現(xiàn)水晃動(dòng)效果

html {height: 100%;}
body {height: 100%; background: #f3f3f3;}
.wave {
width: 100%;
height: 200px;
position: relative;
}
.wave:before {
content: "";
display: block;
position: absolute;
border-radius: 33% 0 0 0;
background: #00BFFF;
top: 0; right: 0;
width: 2000px;
height: 100px;
z-index: 1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: wave1 8s linear infinite;
-moz-animation: wave1 8s linear infinite;
animation: wave1 8s linear infinite;
}
.wave:after {
content: "";
display: block;
position: absolute;
border-radius: 0 0 0 50%;
background: #00BFFF;
bottom: 0; right: 0;
width: 2000px;
height: 100px;
z-index: 1;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-animation: wave2 8s linear infinite;
-moz-animation: wave2 8s linear infinite;
animation: wave2 8s linear infinite;
}
@-webkit-keyframes wave1 {
0% {right: -30%;}
100% {right: 130%;}
}
@-webkit-keyframes wave2 {
0% {right: -50%;}
100% {right: 150%;}
}
@-moz-keyframes wave1 {
0% {right: -30%;}
100% {right: 130%;}
}
@-moz-keyframes wave2 {
0% {right: -50%;}
100% {right: 150%;}
}
@keyframes wave1 {
0% {right: -30%;}
100% {right: 130%;}
}
@keyframes wave2 {
0% {right: -50%;}
100% {right: 150%;}
}

在頁面使用以上代碼，即可實(shí)現(xiàn)一個(gè)水晃動(dòng)的效果，通過偽元素的旋轉(zhuǎn)和動(dòng)畫實(shí)現(xiàn)正弦波的效果，使頁面更加生動(dòng)有趣。