css实现圆球旋像水波波动_css3之水波效果

这些效果可谓多种多样，当然用canvas、svg也都能实现奈何对这些有不熟悉(尴尬)，不过咱们用css来写貌似也没想象中的那么难吧。

一  悬浮球水波效果

效果图

css

.container {

width: 100px;

height: 100px;

border-radius: 50%;

border: 3px solid #e787e7;

background: #ffffff;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

padding: 5px;

overflow: hidden;

}

.wave {

position: relative;

width: 100px;

height: 100px;

background-image: linear-gradient(-180deg, #3b7bdb 13%, #4d6fdf 91%);

border-radius: 50%;

}

.wave-mask {

position: absolute;

width: 200px;

height: 200px;

top: 0;

left