这些效果可谓多种多样，当然用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之水波效果的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  4. iOS 水波效果

    将水波效果放在子视图上,主控制器只负责加载 #import "WaveProgress.h" @interface WaveProgress () @property (nonat ...

  5. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  6. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  7. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

  8. canvas三角函数模拟水波效果

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  9. Unity3D Shader水波效果

    水波效果 Shader "Custom/WaterWave" { Properties { _MainTex ("Base (RGB)", 2D) = &quo ...

随机推荐

  1. 【python爬虫】cookie & session

    一.什么是cookie? cookie是指网站为了鉴别用户身份,进行会话跟踪而存储在客户端本地的数据. 二.什么是session? 本来的含义是指有始有终的一些列动作,而在web中,session对象 ...

  2. CF1253E Antenna Coverage（DP）

    本题难点在正确性证明. 令 \(f_i\) 表示 \([1,i]\) 被全部覆盖的最小花费.答案为 \(f_m\). 首先发现,添加一个区间 \([0,0]\) 不会影响答案.所以 \(f_i\) 的 ...

  3. php逻辑运算符 异或

  4. Windows安装与配置—MongoDB

    1,下载安装 打开下载链接:http://dl.mongodb.org/dl/win32/x86_64,选择后缀是2008plus-ssl-3.6.15.zip的版本,32位和64位通用. 2,安装配 ...

  5. SqlServer，Oracle，db2，MySql查询表索引

    SqlServer1. 查询表索引 SELECT 索引名称=a.name ,表名=c.name ,索引字段名=d.name ,索引字段位置=d.colid ,c.status FROM sysinde ...

  6. hibernate手动设置的id无效的原因与解决方法

    在使用Hibernate的过程中,发现手动设置的id(主键)无效,Hibernate仍然会在保存(调用Hibernate提供的merge()方法)的时候自动生成一个随机的id. 经过调试发现问题出在了 ...

  7. eclipse强行停止buliding workspace

    使用Eclipse的过程中可能会遇到buliding workspace卡在一半走不动的情况. 出现这个情况往往是因为Eclipse太调皮了,需要拉出去打屁股,打一顿就好了. 开玩笑的,事实上出现这个 ...

  8. Java 8，Jenkins，Jacoco和Sonar进行持续集成

    技术环境 在以安全与质量为主要驱动力的项目中,CI至关重要. 因此,我从我的团队开始进行"概念验证",以表明以下技术已准备好协同工作: Java 8, NetBeans 8.0 & ...

  9. RaiseException函数逆向

    书中内容: 代码逆向: 存在一个疑问:为什么在ExceptionAddress本来是错误产生代码的地址,但这里给存入一个_RaiseException的偏移地址. 答案在下个函数中:rtlRaiseE ...

  10. 玩下PHP的分词，最近有这个需求

    找了个地方 下载代码 我是在这里下载的 https://www.jb51.net/codes/65593.html 1 下载完毕后  打开是这样的文件 2  先把代码集成到thinkphp3.2.3里 ...