这些效果可谓多种多样，当然用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. Centos 6 变更 窗口管理器

    /etc/sysconfig/desktop ( 没有的话创建一个) DESKTOP="KDE" DISPLAYMANAGER="KDE"

  2. [译]发布ABP v0.19包含Angular UI选项

    发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...

  3. 提取Office图标的方法

    需求 几年前,好声音以独特节目形式吸引了很多选手和观众的 观注,旨在"只寻找优质声音": 可声音各有特色时,还得看颜值,当然这也无可厚非.虽然扯得有点远,我想表达的是软件开发的稳定 ...

  4. C语言程序设计100例之（7）：级数求和

    例7    级数求和 题目描述 已知: Sn =1+1/2+1/3+…+1/n.显然对于任意一个整数 k,当 n 足够大的时候,Sn>k. 现给出一个整数 k,要求计算出一个最小的 n,使得 S ...

  5. Jmeter之用于json格式的响应断言

    当响应结果是json格式时,用JSON Assertion更方便判断. 1 在请求上右键添加json断言 2  编辑json Assertion 判断方式: 如果响应结果不是json格式的,fail ...

  6. Selenium+java - 关于富文本编辑器的处理

    什么是富文本编辑器? 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.具体长啥样,如下图: 通过自动化操作富文本编辑器 模拟场景:在富文 ...

  7. C# 通过反射调用 Func 委托

    C# 通过反射调用 Func 委托 Intro 最近我的 NPOI 扩展库增加了,自定义输出的功能,可以自定义一个 Func 委托来设置要导出的内容,详细介绍请查看 https://www.cnblo ...

  8. 常见跨域解决方案以及Ocelot 跨域配置

    常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...

  9. python基础(18):初识模块、re模块

    1. 认识模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1.使用python编写的代码(. ...

  10. 基于token机制鉴权架构

    常见的鉴权方式有两种,一种是基于session,另一种是基于token方式的鉴权,我们来浅谈一下两种 鉴权方式的区别. 两种鉴权方式对比 session 安全性:session是基于cookie进行用 ...