使用純css實現波浪效果
阿新 • • 發佈：2017-09-29
波浪 gree transform orm infinite ram 定位 position mes
有時候我們需要實現水晃動的效果，其實我們可以通過css旋轉動畫和圓角來實現。
首先來2個div,外層div相對定位，內層div絕對定位，內層div大致位於外層div上半部分。外層div設置一個顏色較深的背景色（水的顏色）;內層div顏色設置為白色，加上圓角，圓角建議30%-45%之間，然後加上無限循環的旋轉動畫，通過內層div的旋轉來實現波浪效果。
參考代碼如下：
<style>
#container{
width:400px;
height:200px;
position: relative;
border:1px solid #ccc;
margin:300px auto;
overflow: hidden;
background:seagreen;
}
.wave{
background:#fff;
border-radius:32%;
width:500px;
height:500px;
position:absolute;
left:50%;
bottom:68px;
animation: go 8s infinite linear;
}
@keyframes go {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -2%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0%) rotateZ(360deg);
}
}
</style>
<body>
<div id="container">
<div class="wave"></div>
</div>
</body>
使用純css實現波浪效果