css3+jQuery实现按钮水波纹效果
<!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实现按钮水波纹效果的更多相关文章
- jquery ripples水波纹效果( 涟漪效果)
这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- canvas实现水波纹效果
本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效. 水波基本原理 首先复习一波高中物理知识. 波是指振 ...
- Android自定义控件-Path之贝赛尔曲线和手势轨迹、水波纹效果
从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo ...
- Android点击Button水波纹效果
先上图,看看接下来我要向大家介绍的是个什么东西,例如以下图: 接下来要介绍的就是怎样实现上述图中的波纹效果.这样的效果假设大家没有体验过的话,能够看看百度手机卫士或者360手机卫士,里面的按钮点击效果 ...
- 兼容Android的水波纹效果
Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...
- android自定义控件(4)-自定义水波纹效果
一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
- Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...
随机推荐
- 第二课作业——redis常用命令
第二课时作业 静哥 by 2016.2.23~2016.2.22 [作业描述] 1.key string list hash结构中,每个至少完成5个命令,包含插入 修改 删除 查询,list 和h ...
- iOS论App推送方案
1.APNS介绍(原生推送实现原理) 在iOS平台上,大部分应用是不允许在后台运行并连接网络的.在应用没有被运行的时候,只能通过 Apple Push Notification Service (AP ...
- 【Python之路】第十四篇--jQuery
jquery简介 1.jquery是什么 ☛ 参考用法 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery ...
- python系列十六:Python3 面向对象
#!/usr/bin/python #-*-coding:gbk-*- #Python3 面向对象 '''面向对象技术简介 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了 ...
- threading模块、ThreadLocal
一.threading模块 1.线程对象的创建 1.1 Thread类直接创建 import threading import time def countNum(n): # 定义某个线程要运行的函数 ...
- DL for objection detection
在计算机视觉领域,"目标检测"主要解决两个问题:图像上多个目标物在哪里(位置),是什么(类别).围绕这个问题,人们一般把其发展历程分为3个阶段:1. 传统的目标检测方法2. 以R- ...
- R中的data.table 快速上手入门
data.table包提供了一个非常简洁的通用格式:DT[i,j,by]. 可以理解为:对于数据集DT,选取子集行i,通过by分组计算j. 对比与dplyr等包,data.table的运行速度更快. ...
- ansible安装及使用
一.ansible介绍 1.ansible简介 官方的title是“Ansible is Simple IT Automation”——简单的自动化IT工具. Ansible跟其他IT自动化技术的区别 ...
- python之元组操作
1.元组创建 tup1 = ('physics', 'chemistry', 1997, 2000) tup2 = (1, 2, 3, 4, 5 ) tup3 = "a", &qu ...
- NHibernate应用开发
第一章:NHibernate入门 第一讲:NHibernate架构剖析 第二讲:搭建第一个NHibernate应用程序 第三讲:nhibernate.cfg.xml ...