这些效果可谓多种多样，当然用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. gradle中gredle -q 参数是什么意思

    很多地方在调用 gradle 命令时都加了 -q 参数.该参数用来控制 gradle 的日志级别,可以保证只输出我们需要的内容.

  2. css的伪元素 ::after ::before 和 图标字体的使用

    浅谈css的伪元素::after和::before   css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...

  3. activiti5初识

    因工作需要,接手新的项目,其中用到了activiti实现的工作流,特意去大致学习下,特此记录下. 1.acticiti5框架说明及表结构介绍 Activiti5工作流引擎框架: 它实际上是一个java ...

  4. C# - WinFrm应用程序调用SharpZipLib实现文件的压缩和解压缩

    前言 本篇主要记录:VS2019 WinFrm桌面应用程序调用SharpZipLib,实现文件的简单压缩和解压缩功能. SharpZipLib 开源地址戳这里. 准备工作 搭建WinFrm前台界面 添 ...

  5. laravel中使用FormRequest进行表单验证，验证异常返回JSON

    通常在项目中,我们会对大量的前端提交过来的表单进行验证,如果不通过,则返回错误信息. 前端为了更好的体验,都使用ajax进行表单提交,虽然 validate() 方法能够根据前端的不同请求方式,返回不 ...

  6. Jenkins 在 Tomcat 运行访问路径设置

    问题 最近用 Tomcat 搭建了个 Jenkins ,但是访问的时候需要端口加 /jenkins/ 才能进行访问.我们是直接将 Jenkins.war 包放在 webapps下的. 我们想直接通过不 ...

  7. C# WinForm实现禁止最大化、最小化、双击标题栏、双击图标等操作

    protected override void WndProc(ref Message m) { if (m.Msg==0x112) { switch ((int) m.WParam) { //禁止双 ...

  8. arcgis api for javascript 学习（六） 地图打印

    1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...

  9. iOS9新框架—Watch Connectivity（详情：http://ios.itcast.cn/subject/ios9/index.shtml ）

    1背景. Watch Connectivity--专为用来实现Watch与配对iPhone上的文件和数据的来回传输而生. 2.iOS8与iOS9发送数据的对比. 我们知道数据交换在iOS8中就有,我们 ...

  10. 微信小程序访问webservice（wsdl）+ axis2发布服务端(Java)

    0.主要思路:使用axis2发布webservice服务端,微信小程序作为客户端访问.步骤如下: 1.服务端: 首先微信小程序仅支持访问https的url,且必须是已备案域名.因此前期的服务器端工作需 ...