java网页涟漪特效

涟漪特效"/>

java网页涟漪特效

这种效果稍加改造非常优雅、并且可以准确的实验触摸聚焦点。缺点是非常消耗内存。娱乐为主吧

js

//╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣ 涟漪特效 ╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣

涟漪特效 = function()

{

$('body').on('tap', function (e)

{

var left = e.detail.center.x;

var top = e.detail.center.y;

$("body").append('

setTimeout(function () {

$('.dot:first').remove();

}, 1500);

});

}

css

/* 涟漪特效 */

.dot {

display: block;

height: 20px;

width: 20px;

background: transparent;

border-radius: 100%;

position: absolute;

animation: sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);

-webkit-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);

-ms-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);

-moz-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);

background: transparent;

z-index:;

}

@keyframes sploosh

{

0% {

box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);

background: rgba(66, 166, 223, 0.7);

}

100% {

box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);

background: rgba(66, 166, 223, 0);

}

}

@-webkit-keyframes sploosh

{

0% {

-webkit-box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);

-webkit-background: rgba(66, 166, 223, 0.7);

}

100% {

-webkit-box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);

-webkit-background: rgba(66, 166, 223, 0);

}

}

@-ms-keyframes sploosh

{

0% {

-ms-box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);

background: rgba(66, 166, 223, 0.7);

}

100% {

-ms-box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);

background: rgba(66, 166, 223, 0);

}

}

@-moz-keyframes sploosh

{

0% {

box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);

background: rgba(66, 166, 223, 0.7);

}

100% {

box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);

background: rgba(66, 166, 223, 0);

}

}

jQuery UI炫酷雨滴落在水面上的波纹涟漪特效

raindrops是一款效果很炫酷的jQuery UI雨滴落在水面上的特效. 该特效模拟水滴从空中落入平静的水面上的效果. 通过參数能够设置水面波纹的大小,强度,波纹扩散的速度等等属性. 效果演示:h ...

Echarts数据可视化series-effectscatter特效散点图，开发全解+完美注释

全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

Echarts特效散点图全解

mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 font ...

EChars学习-1

Echarts,编写来自Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具 官网地址:/ 一.引入Echarts &l ...

Echarts数据可视化全解注释

全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

pyecharts使用

安装 pyecharts 兼容 Python2 和 Python3.目前版本为 0.1.2 pip install pyecharts 入门 首先开始来绘制你的第一个图表 from pyecharts ...

Python：数据可视化pyecharts的使用

什么是pyecharts? pyecharts 是一个用于生成 Echarts 图表的类库. echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生 ...

python --数据可视化(一)

python --数据可视化 一.python -- pyecharts库的使用 pyecharts--> 生成Echarts图标的类库 1.安装: pip install pyecharts ...

Python数据可视化系列-02-pyecharts可视化非常cool

pyecharts介绍 pyecharts网站 Pyecharts生成的图像,动态效果非常cool.在HTML上展示很是perfect.matplotlib用于科研,但是pyecharts用于展示和讲 ...

随机推荐

[python] import curses

python 中,我们使用 curses.wrapper 来创建终端交互window.使用 stdscr 来代表 window 对象. 使用方法: from curses import wrapper ...

js 字符串类型转为数组类型

以前从来没有想过这个转换,以为直接拼出来就可以了,今天同事问我这个问题,特记录如下. var test='["colkey", "col", "col ...

Android开发之”再按一次退出程序“的实现

现在移动客户端退出程序对话框退出越来越不流行了,都开始使用连续按两次来退出,即著名的“再按一次退出程序”模式.现在就看看怎么实现的吧. @SuppressLint("HandlerLeak& ...

LitJson处理Json

LitJSON是一个.NET平台下处理JSON格式数据的类库,小巧.快速.它的源代码使用C#编写,可以通过任何.Net平台上的语言进行调用,目前最新版本为LitJSON 0.9. 下载地址: http ...

excel导入到Orcle

Excel导入到Oracle中 在Oracle中创建一个表,与excel的表头对应 将excel文件保存为.csv格式 创建一个.ctl文件 load data infile 'd:\xiaoyou. ...

ios7对于NSString对象进行了的变更

1.instancetype替代id来做返回值的类型.

[转帖]Sqlserver BCP 的用法

SQL Server中bcp命令的用法以及数据批量导入导出 .html 我这边使用 ...

vue学习02

圆中圆: father: padding:6px width:56px height:56px border-radius:50% box-sizing:border-box son: width:1 ...

利用顶点位移进行VR畸变校正

VR开发的最大挑战之一是对高帧率与高分辨率结合的要求.我们通过把顶点转化为“镜头空间”,删除了需要全屏渲染的纹理,这样就可以大规模提高手机性能. 下面的技术使用谷歌的Cardboard Unity S ...

JVM之基本结构

1. Java虚拟机的架构 1.1 Java的NIO库允许Java程序使用直接内存,访问直接内存的速度优于Java堆.出于性能的考虑,读写频繁的场合会考虑使用直接内存. 1.2 本地方法栈和Java栈 ...