css3+图片制作圆形球状水波荡漾效果

偶然看别人网站上有个这个效果,刚开始觉得应该是canvas或者svg做的。但是仔细一看有三个部位,就感觉是图片+css做的。查看下代码后果然是,然后好奇心使然,就把它扒下来了,供大家参考。

先上效果图:

css3+图片制作圆形球状水波荡漾效果_第1张图片

他的布局和代码结构也很简单,就是用三个div 做三个背景图,设置不同的opacity。然后通过css3的animate 结合 keyframes做的一个从左往右的动画。

完整代码我也贴出来,大家拿去参考。




    
    
    
    Document
    


    

6542.3214

BTC

最后放把那张图片贴出来,如果要试的话,把这张图片下载下去用。

css3+图片制作圆形球状水波荡漾效果_第2张图片

最后最后,水印大家自己处理下。

thx.

你可能感兴趣的:(插件代码,水波荡漾,css3动画)