波纹按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta name="name" content="content" charset='utf-8'>
	<script src="jquery-1.12.4.min.js"></script>
	<style type="text/css" media="screen">
		/*tab切换*/
		.list-tab{
		    position: relative;
		    top: 0;
		    left: 0;
		    z-index: 10;
		    box-sizing: border-box;
		    width: 100%;
		    height: 50px;
		    background: #fff;
		    font-size: 14px;
		    line-height: 50px;
		}
		.list-tab-fill{
		  position: absolute;
		  margin-bottom: 12px;
		  width: 100%;
		  height: 50px;
		  max-width: 640px;
		}
		.list-tab ul {
		  position: relative;
		  /*box-shadow: 0 1px 3px rgba(0, 0, 0, .2);*/
		  overflow: hidden;
		}
		.list-tab li{
		  position: relative;
		  float: left;
		  overflow: hidden;
		  width: 25%;
		  color: #666;
		  text-align: center;
		  text-transform: uppercase;
		  cursor: pointer;
		}

		.list-tab li.slider {
		    position: absolute;
		    bottom: 0;
		    left: 40px;
		    display: block;
		    height: 2px;
		    background: #6E5EA6;
		    -webkit-transition: all 0.5s;
		    transition: all 0.5s;
		}
		.list-tab li.current{
		    color: #6E5EA6;
		}
		.ripple {
		    position: absolute;
		    width: 0;
		    height: 0;
		    border-radius: 50%;
		    background: rgba(108, 0, 255, 0.2);
		    opacity: 1;
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    -ms-transform: scale(0);
		}

		.rippleEffect {
		    -webkit-animation: rippleDrop .6s linear;
		    animation: rippleDrop .6s linear;
		}
		@-webkit-keyframes rippleDrop {  
			100% {
			    opacity: 0;
			    -webkit-transform: scale(2);
			    transform: scale(2);
			}
		}
		@keyframes rippleDrop {  
			100% {
			    opacity: 0;
			    -webkit-transform: scale(2);
			    transform: scale(2);
			}
		}
	</style>
</head>
<body>
	<script>
        function resetFontSize(){
		    $('html').css('font-size', $('body').width()/16);
		}
		resetFontSize();
		$(window).resize(function(){
		    resetFontSize();
		});

	</script>
    <div class="list-tab">
        <div class="list-tab" id="list-tab">
	        <ul class="clearfix">
	            <li data-tab="1">公司介绍</li>
	            <li data-tab="2">团队介绍</li>
	            <li data-tab="3">加入我们</li>
	            <li class="slider"></li>
	        </ul>
	    </div>
    </div>
    <script>
        $('ul').on('touchstart','li',function(e){
        	var self = $(this);
        	// 当前tab所在第几个
        	var buttonWidth = self.width(),buttonHeight = self.height();
	        var whatTab = self.index(),slider=$('.slider');
	        //需要移动多少距离
	        var howFar = buttonWidth * whatTab;
	        slider.css({
	            left: (howFar)+ 40 + "px"
	        });
        	$(".ripple").remove('.ripple');
        	self.prepend("<span class='ripple'></span>");
        	$(".ripple").css({
	            width: buttonWidth,
	            height: buttonHeight,
	            top: 0,
	            left: 0
	        }).addClass("rippleEffect");
	        e.preventDefault();
        });
    </script>
</body>
</html>
波纹按钮

推荐阅读
