水波纹

css3仿写水波纹效果

僤鯓⒐⒋嵵緔 提交于 2020-01-11 04:52:40
特效如下 是向四周扩散的效果,带animate的 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3 水纹效果</title> <style type="text/css"> .point_area { text-align: center; position: relative; width: 150px; height: 150px; transition: opacity .5s ease-out; } .point_area .point { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 10px; height: 10px; margin: auto; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; background: transparent; } .point_area .point_dot { z

CSS 按钮水波纹特效

夙愿已清 提交于 2019-12-04 18:28:49
/* 按钮反馈之波纹 */ .ripple { position: relative; /* overflow:hidden */ 打开注释及效果不扩散在外 } .ripple:focus{ outline: none; } .ripple:after { content: ""; display: block; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; pointer-events: none; background-color: #888; background-repeat: no-repeat; background-position: 50%; opacity: 0; transition: all .3s; } .ripple:active:after { opacity: .3; top: 0; left: 0; right: 0; bottom: 0; transition: 0s; } /* 按钮反馈之波纹 */ 来源: https://www.cnblogs.com/sillong/p/11877519.html

波浪线,水波纹

匿名 (未验证) 提交于 2019-12-02 23:26:52
自定义View package gg.bw.com.wangshu20190404; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.util.AttributeSet; import android.view.View; public class WaterView2 extends View { Paint paint = new Paint(); Path path = new Path(); float mt; public WaterView2(Context context) { super(context); paint.setAntiAlias(true); } public WaterView2(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); path.reset(); path.moveTo(getLeft()

一个基于WebGL的仿真3D水池有逼真的水波纹效果

送分小仙女□ 提交于 2019-12-02 02:16:51
最近在研究WebGL,看到国外很多高手做的很多超炫的3D效果,无比羡慕。忍不住把效果趴下来研究,下面介绍一个逼真的游泳池中浮动小球的效果。效果非常绚丽,功能强大。示例可切换观察水池的视角,不同视角考虑到了光线从不同角度折射和反射的影响,所以波纹效果极其逼真。 先介绍下WebGL WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。 啰嗦这这么多先给张效果图 webgl-water 下面是整理好的一个示例,在chrome,firefox浏览器下查看,不支持IE和safari。chrome下效果最佳,另外对显卡和驱动也有要求。 查看示例 下面是示例的下载地址,不过由于WebGl不能跨域加载图片本地查看不到效果,上传到服务器中或者本地的本地搭建的服务器环境也可以。 下载地址 来源: oschina 链接: https://my.oschina.net/u

css3水波纹效果

二次信任 提交于 2019-11-29 00:09:05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> </head> <style type="text/css"> .dot { animation: sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .dot2 { animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .dot3 { animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .dot,.dot2,.dot3{ height: 100px; width: 100px; font-size: 20px; color: #fff; line-height: 100px; text-align: center; border-radius: 100%;