button特效

最新推荐文章于 2024-08-17 12:53:28 发布

soosgo

最新推荐文章于 2024-08-17 12:53:28 发布

阅读量714

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Doulvme/article/details/81540478

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding: 0px;margin: 0px;}
			.wrap{width: 80%;margin: 50px auto;}
			ul{list-style: none;font-size: 14px;position: relative;}
			ul li{position:relative;float: left;padding: 10px 25px;cursor: pointer;margin-right: 5px;z-index: 1;}
			.slider{position: absolute;top: 0px;width: 0px;background: #46c0b3;z-index: 0;}
			ul li:after{content: "";
			    position: absolute;
			    left: 50%;
			    bottom: -2px;
			    width: 100%;
			    border-bottom: 2px solid #333;
			    -webkit-transform: translate(-50%) scaleX(0);
			    transform: translate(-50%) scale(0);
			    transition: .2s ease-in-out;}
				ul li:hover:after{-webkit-transform: translate(-50%) scaleX(1);transform: translate(-50%) scale(1);}
				
			/*鼠标点击类*/
			.ripple{
				position: absolute;
				opacity: 1;
				width: 0px;
				height: 0px;
				border-radius: 50%;
				background: rgba(255,255,255,0.7);
				-webkit-transform: scale(0);
				-moz-transform: scale(0);
				transform: scale(0);
			}
			.rippleEffect{
				-webkit-animation: rippleDrop 0.6s linear;
				animation: rippleDrop 0.6s linear;
			}
			@-webkit-keyframes rippleDrop{
				to{
					-webkit-transform: scale(2);
					transform: scale(2);
					opacity: 0;
				}
			}

		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li>菜单一</li>
				<li>菜单二</li>
				<li>菜单三</li>
				<li>菜单四</li>
				<li>菜单五</li>
				<li>菜单六</li>
				<div class="slider"></div>
			</ul>
		</div>
		<script src="js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript">
			$("ul li").hover(function(e) {
				var w=$(this).outerWidth();
				var h=$(this).outerHeight();
				$(".slider").css({
					width:w+'px',
					height:h+'px',
				});
				var whatTab = $(this).index();
				var howFar = (w+5) * whatTab;
				$('.slider').animate({
					left: howFar + "px"
				},'fast');
			});
			$("ul li").click(function(e) {
				$(".ripple").remove();
				// Setup
				var posX = $(this).offset().left,
					posY = $(this).offset().top,
					buttonWidth = $(this).width(),
					buttonHeight = $(this).height();
				// Add the element
				$(this).prepend("<span class='ripple'></span>");
				// Make it round!
				if(buttonWidth >= buttonHeight) {
					buttonHeight = buttonWidth;
				} else {
					buttonWidth = buttonHeight;
				}
				// Get the center of the element
				var x = e.pageX - posX - buttonWidth / 2;
				var y = e.pageY - posY - buttonHeight / 2;
				// Add the ripples CSS and start the animation
				$(".ripple").css({
					width: buttonWidth,
					height: buttonHeight,
					top: y + 'px',
					left: x + 'px'
				}).addClass("rippleEffect");
			});
			</script>
	</body>
</html>