css3之水波效果

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

一悬浮球水波效果

效果图

css

.container {

            width: 100px;

            height: 100px;

            border-radius: %;

            border: 3px solid #e787e7;

            background: #ffffff;

            position: absolute;

            top: %;

            left: %;

            transform: translate(-%, -%);

            padding: 5px;

            overflow: hidden;

        }

        .wave {

            position: relative;

            width: 100px;

            height: 100px;

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

            border-radius: %;

        }

        .wave-mask {

            position: absolute;

            width: 200px;

            height: 200px;

            top: ;

            left: %;

            border-radius: %;

            background-color: rgba(, , , 0.9);

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

            animation: toRotate 10s linear -5s infinite;

            z-index: ;

            background-color: rgba(, , , 0.9);

        }

        @keyframes toRotate {

            % {

                transform: translate(-%, -%) rotate(180deg);

            }

            % {

                transform: translate(-%, -%) rotate(360deg);

            }

        }

样式不多，加入了css3动画

html

<body>

        <div class="container">

             <div class="wave"></div>

             <div class="wave-mask"></div>

        </div>

</body>

dom元素只有3个div，内容不是很复杂，想必看一下都有所了解吧

拓展

这种效果也可作为一个动态的进度条，这样是不是感觉很酷炫呢，下面就不放code了，补一个语言提示，我们发现在dom里蒙层节点

.wave-mask(div)的top值，可以尝试一下动态的控制（top）值，在观察一下水波球的变化，这一步不用写代码在控制台就可以实现，好了现在你也可以去尝试了

巴特西

css3之水波效果

一悬浮球水波效果

效果图

css

html

拓展

最新文章

热门文章

巴特西

css3之水波效果

一 悬浮球水波效果

效果图

css

html

拓展

最新文章

热门文章

一悬浮球水波效果