<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>水波纹按钮</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<style>
/*自定义按钮样式*/
.btns{

    height: 30px;

    line-height: 30px;

    text-align: center;

    width: 200px;

    color: #fff;

    background-color: #428bca;

    margin: 50px auto;

}

/*必要样式*/

.water-btn{

    position: relative;

    overflow: hidden;

}

.wb-click{

    position: absolute;

    z-index: 2;

    width: 100%;

    height: 100%;

    top:0px;

    left: 0px;

}

.water-btn .wb-world{

    position: relative;;

    z-index: 1;

}

.water-btn .water-btn-style{

    position:absolute;

    border-radius:100%;
　　opacity:.6;

    background:#fff;

    animation:waterBtn 3s;

    -webkit-animation:waterBtn 3s; /* Safari and Chrome */

    transform: translate(-50%, -50%) scale(1);

}

@keyframes waterBtn

{

    0% {

        width:0px;

        height:0px;

    }

    50% {

        width:1000px;

        height:1000px;

        opacity:0

    }

    100%{

        opacity:0

    }

}

@-webkit-keyframes waterBtn /* Safari and Chrome */

{

    0% {

        width:0px;

        height:0px;

    }

    50% {

        width:1000px;

        height:1000px;

        opacity:0

    }

    100%{

        opacity:0

    }

}

</style>

</head>

<body>

<!-- domo data-clickColor是水波纹的颜色；可以是#xxxxxx的形式，也可以是rgba()的形式 -->
<div class="water-btn btns" data-clickColor="rgba(255,255,255,.5)">

    <div class="wb-click"></div>

    <div class="wb-world">这里是一个按钮</div>

</div>

<script src="js/jquery.min.js"></script>

<script>

$(function(){

    $('.water-btn').click(function(e){

        var _this = $(this);

        var px = e.offsetX;

        var py = e.offsetY;

        var id=parseInt(Math.random()*1000);

        _this.append('<div class="water-btn-style" style="top:'+py+'px;left:'+px+'px;background:'+_this.attr('data-clickColor')+'" id="wb_'+id+'"></div>');

        setTimeout(function(){

            _this.find('#wb_'+id).remove()

        },3000)

    });

});

</script>

</body>

</html>

css3+jQuery实现按钮水波纹效果的更多相关文章

  1. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  2. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  3. canvas实现水波纹效果

    本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效. 水波基本原理 首先复习一波高中物理知识. 波是指振 ...

  4. Android自定义控件-Path之贝赛尔曲线和手势轨迹、水波纹效果

    从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo ...

  5. Android点击Button水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,例如以下图: 接下来要介绍的就是怎样实现上述图中的波纹效果.这样的效果假设大家没有体验过的话,能够看看百度手机卫士或者360手机卫士,里面的按钮点击效果 ...

  6. 兼容Android的水波纹效果

    Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...

  7. android自定义控件(4)-自定义水波纹效果

    一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...

  8. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

  9. Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果

    利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...

随机推荐

  1. .net时间格式与彻夜未眠的我

    夜已经很深了,外面的狂风还在呜呜的叫着,我的脚已经冰凉冰凉...从11点半到现在我一直在测试为什么正确的Json格式字符串传到服务器后还在报400错误... 尼玛啊,以前测试是没有问题的啊 事情是这样 ...

  2. python基础-第十三篇-13.2Web框架之Tornado

    Tornado是非阻塞异步web frame,而且速度相当快,得力于其非阻塞的方式和对epoll的运用 Tornado每秒可以处理数以千计的链接,所以它可以有效的处理C10K问题 下载安装 pip3 ...

  3. settings配置与model优化

    settings配置与model优化 settings: 项目基本配置(settings.py, models.py, admin.py,  templates...).数据库操作.中间件 http: ...

  4. 【我的Android进阶之旅】Android Studio查看Logcat时，如果一行Log太长如何换行显示？

    使用Android Studio一段时间了,还有很多小技巧没有掌握.今天又发现了一个比较好用的小技巧,这里分享出来. 1.Android Studio默认显示效果 比如我们用Logcat来查看打印的L ...

  5. Objective-C学习笔记（五）——数据类型与限定词

    如同其它不论什么的编程语言一样,想要更深入的学习.必需要了解该门语言的数据类型与限定词. OC的数据类型例如以下: (1)int:整型:   int a;      int b=2;     int ...

  6. Linux学习笔记（11）linux网络管理与配置之一——配置路由与默认网关，双网卡绑定（5-6）

    Linux学习笔记(11)linux网络管理与配置之一——配置路由与默认网关,双网卡绑定(5-6) 大纲目录 0.常用linux基础网络命令 1.配置主机名 2.配置网卡信息与IP地址 3.配置DNS ...

  7. Linux知识点总结

  8. 用HAProxy和KeepAlived构建高可用的反向代理系统

    对于访问量较大的网站来说,随着流量的增加单台服务器已经无法处理所有的请求,这时候需要多台服务器对大量的请求进行分流处理,即负载均衡.而如果实现负载均衡,必须在网站的入口部署服务器(不只是一台)对这些请 ...

  9. OPNET 安装运行问题总结

    OPNET作为专业级网络仿真软件,其强大的功能使其在多个领域有广泛的应用.“越强大的软件,安装越闹心”,OPNET就是这样一款安装和运行的都很闹心的软件,这里简单转载和记录我安装OPNET和使用中的问 ...

  10. $python数据分析基础——初识matplotlib库

    基本用法 import numpy as np import matplotlib.pyplot as plt # 年份 year = [1950,1970,1990,2010] # 全球总人口(单位 ...