这些效果可谓多种多样，当然用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. LG2679 「NOIP2015」子串 线性DP

    问题描述 LG2679 题解 设\(opt[i][j]\)代表A串前\(i\)个,匹配\(B\)串前\(j\)个,选择了\(k\)个子串的方案数. 转移用前缀和优化一下. \(\mathrm{Code ...

  2. JVM-Jinfo命令

    jinfo JVM Configuration info这个命令作用是实时查看和调整虚拟机运行参数. 之前的jps -v口令只能查看到显示指定的参数,如果想要查看未被显示指定的参数的值就要使用jinf ...

  3. Luogu P3600 随机数生成器

    Luogu P3600 随机数生成器 题目描述 sol研发了一个神奇的随机数系统,可以自动按照环境噪音生成真·随机数. 现在sol打算生成\(n\)个\([1,x]\)的整数\(a_1...a_n\) ...

  4. dom元素上添加断点（使用dom breakpoint找到修改属性的javascript代码）

    使用dom breakpoint能快速找到修改了某一个dom element的JavaScript code位于何处.在Chrome development tool里,选中想要inspect的dom ...

  5. 《细说PHP》 第四版 样章 第二章 PHP的应用与发展 3

    2.3  PHP的开发优势 每种编程语言都有针对的领域,当然相同领域也有多个编程语言可以选择, 所以需要了解每种编程语言的优势和劣势,才能更好地去选择使用,在对的开发领域充分发挥它的优势,编写出最优质 ...

  6. git分支合并解决冲突

    git分支合并,解决冲突 1.手动解决冲突 手动解决冲突,需要使用编辑器,把所有文件中出现的冲突地方修改,然后再添加到暂存区再提交 >>>>>>brancha so ...

  7. glibc编译安装

    glibc是gnu发布的libc库,即c运行库.glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc.glibc除了封装linux操作系统所提供的系统服务外,它本身也提供 ...

  8. 基于 H5 + WebGL 实现的地铁站 3D 可视化系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

  9. pandas 学习 第3篇：Series - 数据处理（应用、分组、滚动、扩展、指数加权移动平均）

    序列内置一些函数,用于循环对序列的元素执行操作. 一,应用和转换函数 应用apply 对序列的各个元素应用函数: Series.apply(self, func, convert_dtype=True ...

  10. 【linux】linux命令lsof和grep命令的配合使用---linux根据端口查看PID,根据PID关键字高亮显示

    lsof命令,根据端口,查看进程PID lsof -i: ps命令+grep命令 --color参数,根据PID查看进程详情,高亮显示关键字 ps -ef | grep --color=always