CSS实现动画效果的菜单收起展开图标，html实现动画效果的箭头

news2024/12/28 4:39:38

效果

请添加图片描述

实现代码

此处JS代码引入了jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.menu-icon{
				position: absolute;
			    left: 20%;
			    top: 30%;
				transition: all .3s;
			}
			.menu-icon:before, .menu-icon:after {
			    position: absolute;
			    width: 10px;
			    height: 2px;
			    background-color: currentcolor;
			    border-radius: 2px;
			    transition: background .3s cubic-bezier(.645,.045,.355,1),transform .3s cubic-bezier(.645,.045,.355,1),top .3s cubic-bezier(.645,.045,.355,1),color .3s cubic-bezier(.645,.045,.355,1);
			    content: "";
			}
			.menu-icon:before{
				transform: rotate(-45deg) translate(4.5px);	
			}
			.menu-icon:after{
				transform: rotate(45deg) translate(-4.5px);	
			}
			.menu-icon-1:before{
				transform: rotate(45deg) translate(4.5px);	
			}
			.menu-icon-2:after{
				transform: rotate(-45deg) translate(-4.5px);	
			}
		</style>
	</head>
	<body>
		<div class="menu-icon" lay-id="1" onclick="showHiden()"></div>
	</body>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
	<script>
		function showHiden(){
			var layId = $(".menu-icon").attr("lay-id");
			if(layId == 1){
				$(".menu-icon").addClass("menu-icon-1");
				$(".menu-icon").addClass("menu-icon-2");
				$(".menu-icon").attr("lay-id", 2);
			}else{
				$(".menu-icon").removeClass("menu-icon-1");
				$(".menu-icon").removeClass("menu-icon-2");
				$(".menu-icon").attr("lay-id", 1);
			}
		}
	</script>
</html>