单击按钮/链接时如何添加特定的突出显示动画？

Question

当点击按钮/链接时，我想通过淡化/拉伸（然后然后）新的背景颜色来突出显示它。

例如：如果您转到Chrome历史记录并点击“Chrome历史记录”链接，“其他设备的标签”或“清除浏览数据”，则会显示此效果。

我该怎么做？

谢谢。

Answer 1

实际上谷歌使用纸涟漪来提供视觉效果，其他纸张元素可以用来模拟从接触点发出的涟漪效应。效果可以看作是一个带运动的同心圆。

paper-ripple会侦听“mousedown”和“mouseup”事件，因此触摸它时会显示涟漪效应。您还可以打败默认行为并手动将向下和向上操作路由到ripple元素。请注意，如果调用downAction（），则必须确保调用upAction（），以便纸张纹理结束动画循环。

请注意，波纹的父容器必须是相对位置，否则波纹将在所需容器外发出。

REFERENCE

 //jQuery time
    var parent, ink, d, x, y;
    $("ul li a").click(function(e){
    	parent = $(this).parent();
    	//create .ink element if it doesn't exist
    	if(parent.find(".ink").length == 0)
    		parent.prepend("<span class='ink'></span>");
    		
    	ink = parent.find(".ink");
    	//incase of quick double clicks stop the previous animation
    	ink.removeClass("animate");
    	
    	//set size of .ink
    	if(!ink.height() && !ink.width())
    	{
    		//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
    		d = Math.max(parent.outerWidth(), parent.outerHeight());
    		ink.css({height: d, width: d});
    	}
    	
    	//get click coordinates
    	//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
    	x = e.pageX - parent.offset().left - ink.width()/2;
    	y = e.pageY - parent.offset().top - ink.height()/2;
    	
    	//set the position and add class .animate
    	ink.css({top: y+'px', left: x+'px'}).addClass("animate");
    })

/*custom fonts - Bitter, Montserrat*/
    @import url('http://fonts.googleapis.com/css?family=Montserrat|Bitter');
    /*basic reset*/
    * {margin: 0; padding: 0;}
    body {
    	background-color:black;
    	background-size: cover;
    }
    
    h1 {
    	font: normal 32px/32px Bitter; color: white;
    	text-align: center; padding: 85px 100px;
    }
    
    /*nav styles*/
    ul {
    	background: white; border-top: 6px solid hsl(180, 40%, 60%);
    	width: 200px; margin: 0 auto;
    }
    ul li {
    	list-style-type: none;
    	/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
    	position: relative;
    	overflow: hidden;
    }
    ul li a {
    	font: normal 14px/28px Montserrat; color: hsl(180, 40%, 40%);
    	display: block; padding: 10px 15px;
    	text-decoration: none;
    	cursor: pointer; /*since the links are dummy without href values*/
    	/*prevent text selection*/
    	user-select: none;
    	/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
    	position: relative;
    }
    
    /*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
    .ink {
    	display: block; position: absolute;
    	background: hsl(180, 40%, 80%);
    	border-radius: 100%;
    	transform: scale(0);
    }
    /*animation effect*/
    .ink.animate {animation: ripple 0.65s linear;}
    @keyframes ripple {
    	/*scale the element to 250% to safely cover the entire link and fade it out*/
    	100% {opacity: 0; transform: scale(2.5);}
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Ripple Click Effect</h1>
    <ul>
    	<li><a>Dashboard</a></li>
    	<li><a>My Account</a></li>
    	<li><a>Direct Messages</a></li>
    	<li><a>Chat Rooms</a></li>
    	<li><a>Settings</a></li>
    	<li><a>Logout</a></li>
    </ul>

WORKING FIDDLE