正文

按钮点击效果(水波纹)

最骚的就是你  最骚的就是你  2022-08-05  515

关键词：

原文地址：http://www.cnblogs.com/ys-ys/p/5874343.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>按钮水波纹</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
				outline: none;
			}
			
			body {
				font-family: 'Open Sans';
				font-size: 100%;
				font-weight: 300;
				line-height: 1.5em;
				text-align: center;
			}
			
			.btn {
				border: none;
				display: inline-block;
				color: white;
				overflow: hidden;
				margin: 1rem;
				padding: 0;
				width: 150px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
			}
			
			.btn.color-1 {
				background-color: #426fc5;
			}
			
			.btn-border.color-1 {
				background-color: transparent;
				border: 2px solid #426fc5;
				color: #426fc5;
			}
			
			.material-design {
				position: relative;
			}
			
			.material-design canvas {
				opacity: 0.25;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.container {
				align-content: center;
				align-items: flex-start;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				margin: 0 auto;
				max-width: 46rem;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var canvas = {},
					centerX = 0,
					centerY = 0,
					color = '',
					containers = document.getElementsByClassName('material-design'),
					context = {},
					element = {},
					radius = 0,
					// 根据callback生成requestAnimationFrame动画
					requestAnimFrame = function() {
						return(
							window.requestAnimationFrame ||
							window.mozRequestAnimationFrame ||
							window.oRequestAnimationFrame ||
							window.msRequestAnimationFrame ||
							function(callback) {
								window.setTimeout(callback, 1000 / 60);
							}
						);
					}(),
					// 为每个指定元素生成canves
					init = function() {
						containers = Array.prototype.slice.call(containers);
						for(var i = 0; i < containers.length; i += 1) {
							canvas = document.createElement('canvas');
							canvas.addEventListener('click', press, false);
							containers[i].appendChild(canvas);
							canvas.style.width = '100%';
							canvas.style.height = '100%';
							canvas.width = canvas.offsetWidth;
							canvas.height = canvas.offsetHeight;
						}
					},
					// 点击并且获取需要的数据，如点击坐标、元素大小、颜色
					press = function(event) {
						color = event.toElement.parentElement.dataset.color;
						element = event.toElement;
						context = element.getContext('2d');
						radius = 0;
						centerX = event.offsetX;
						centerY = event.offsetY;
						context.clearRect(0, 0, element.width, element.height);
						draw();
					},
					// 绘制圆形，并且执行动画
					draw = function() {
						context.beginPath();
						context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
						context.fillStyle = color;
						context.fill();
						radius += 2;
						// 通过判断半径小于元素宽度，不断绘制 radius += 2 的圆形
						if(radius < element.width) {
							requestAnimFrame(draw);
						}
					};

				init();
			}
		</script>
	</head>

	<body>
		<a class="btn color-1 material-design" data-color="#2f5398">Press me!</a>
	</body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JS</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <script type="text/javascript" src="js/jquery-3.2.0.js"></script>
        <style type="text/css" media="screen">
            ul {
                font-size: 0;
                position: relative;
                padding: 0;
                width: 480px;
                margin: 40px auto;
                user-select: none;
            }
            
            li {
                display: inline-block;
                width: 160px;
                height: 60px;
                background: #E95546;
                font-size: 16px;
                text-align: center;
                line-height: 60px;
                color: white;
                text-transform: uppercase;
                position: relative;
                overflow: hidden;
                cursor: pointer;
            }
            
            .slider {
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 4px;
                background: #1685D3;
                transition: all 0.5s;
            }
            
            .ripple {
                width: 0;
                height: 0;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.4);
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
                position: absolute;
                opacity: 1;
            }
            
            .rippleEffect {
                -webkit-animation: rippleDrop .4s linear;
                animation: rippleDrop .4s linear;
            }
            
            @-webkit-keyframes rippleDrop {
                100% {
                    -webkit-transform: scale(2);
                    transform: scale(2);
                    opacity: 0;
                }
            }
            
            @keyframes rippleDrop {
                100% {
                    -webkit-transform: scale(2);
                    transform: scale(2);
                    opacity: 0;
                }
            }
        </style>

    </head>

    <body>
        <ul>
            <li>项目一</li>
            <li>项目二</li>
            <li>项目三</li>
            <li class="slider"></li>
        </ul>
    </body>
    <script>
        $("ul li").click(function(e) {

            if($(this).hasClass('slider')) {
                return;
            }

            var whatTab = $(this).index();

            var howFar = 160 * whatTab;

            $(".slider").css({
                left: howFar + "px"
            });

            $(".ripple").remove();

            var posX = $(this).offset().left,
                posY = $(this).offset().top,
                buttonWidth = $(this).width(),
                buttonHeight = $(this).height();
            console.log(posX, posY, buttonWidth, buttonHeight)

            $(this).append("<span class='ripple'></span>");

            if(buttonWidth >= buttonHeight) {
                buttonHeight = buttonWidth;
            } else {
                buttonWidth = buttonHeight;
            }

            var x = e.pageX - posX - buttonWidth / 2;
            var y = e.pageY - posY - buttonHeight / 2;

            $(".ripple").css({
                width: buttonWidth,
                height: buttonHeight,
                top: y + 'px',
                left: x + 'px'
            }).addClass("rippleEffect");

        });
    </script>

</html>

点击按钮出现水波纹动画

效果如下：思路：　　按钮及按钮的父标签定位需为绝对定位或相对定位　　绑定按钮的click事件,把其样式设置为overflow:hidden，并添加下标线标签并设置其样式　　当鼠标点击按钮时，如果按钮内有标签(波兰纹)即把该标签删掉... 查看详情

帮我更改一下button点击效果水纹效果。

...查是不是重复调用了：结果点击上面的“waves”和“btn”按钮分别返回了不同的事件对象，所以排除重复调用的可能。在代码的129行，将动画定时器的时间改大（减慢动画执行速度），观察效果：经观察，发现这个“水波纹”特... 查看详情

css3+jquery实现按钮水波纹效果

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>水波纹按钮< 查看详情

android按钮实现按压水波纹效果(代码片段)

....0系统的手机上面，才会有效果。方法二：给Button按钮设置背景<?xmlversion="1.0"encoding 查看详情

如何让所有view都可以带上点击的水波纹效果

参考技术APF的话可以用表达式当撞击事件发生时动态创建一个面片赋予一个水波纹的动画材质查看详情

自定义控件三部曲之绘图篇(二十)——radialgradient与水波纹按钮效果

...……今天给大家讲的效果是使用RadialGradient来实现水波纹按钮效果，水波纹效果是And 查看详情

canvas水波纹效果

先看效果演示效果自然界中水波纹效果十分麻烦，我这里只是根据水波纹的几个特性，在理想环境下模拟水波纹的扩散效果。这里应用到的属性有：扩散、波动、折射。扩散：很好理解，水波纹会从触发原点开始向周围扩散... 查看详情

动态壁纸水波纹效果

】动态壁纸水波纹效果【英文标题】：LiveWallpaperWaterRippleEffect【发布时间】：2012-05-0618:00:07【问题描述】：我正在制作一个动态壁纸，它在触摸屏幕时加入了一些水波纹效果，但我有点卡住了。创建多个图像并循环播放它们以创... 查看详情

Pygame 水波纹效果

】Pygame水波纹效果【英文标题】：Pygamewaterrippleeffect【发布时间】：2011-11-3016:12:55【问题描述】：我在Google上搜索过，但没有现成的脚本-与Flash上的效果相反。我检查了TheWaterEffectExplained上的算法，还测试了PerlinNoise的实现，它可... 查看详情

如何给imageview设置水波纹效果

水波纹效果：1.标准正余弦水波纹；2.非标准圆形液柱水波纹；虽说都是水波纹，但两者在实现上差异是比较大的，一个通过正余弦函数模拟水波纹效果，另外一个会运用到图像的混合模式（PorterDuffXfermode）；先看效果：自定义Vi... 查看详情

怎么用vue实现点击图片(按钮)的波纹效果（涟漪动效）

参考技术A1.先是通过鼠标的点击事件的target属性获取点击的节点，获取该节点的宽和高（offset）2.通过layerX，layerY获取鼠标位置3.播放动画wave.vue 查看详情

水波纹的动态效果

就像这样：http://bbs.nj999.com/attachment/52_12663.gif谁有这种图的教程，或者文字教程也可以，请帮帮忙~~~~~~参考技术Awww.blueidea.com上好像看到过,你找下吧查看详情

ripple水波纹效果

...，在item中添加如下属性：【android:drawable="@color/***"】水波效果会限定在本身矩形区域内部【android:drawable="@drawable/png等"】水波效果会限定在图片中非透明部分对应的区域内部【android:d 查看详情

css实现水波纹效果

1.HTML代码：<divclass="example"><divclass="dot"></div></div>2.CSS样式：设置animation属性.dot:before{content:‘‘;position:absolute;z-index:2;left:0;top:0;width:10px;height:10px;background- 查看详情

materializecss的水波纹效果

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>p{height:100px;line-height:100px;text-align:center;width:100px;backgroun 查看详情

自定义view实现水波纹效果

今天看到一篇自定view实现水波纹效果觉得真心不错学习之后再次写下笔记和心得.但是感觉原作者写得有些晦涩难懂,也许是本人愚笨所以重写此作者教程.原作者博文大家可以去看下,感觉他在自定义view方面非常厉害,本文是基于... 查看详情

android水波纹显示进度效果

关于水波纹的效果想必大家见的已经很多了，我就在这里再啰嗦一次，为了加深自己的印象。先来看看效果图关于这个效果的实现不必想的太过复杂了，要想实现这个效果，我们还需要了解一下PorterDuff及Xfermode关... 查看详情

我家电脑鼠标一滑动屏幕就像水波纹一样，为啥？

...动，4.重启，就好了。2 参考技术B你打开电脑的控制面板点击鼠标点开选项。。然后这样设置查看详情