当前位置：首页 > news >正文

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

news 2025/8/8 16:32:20

效果

请添加图片描述

实现代码

此处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>