移动端菜单按钮打开关闭css3小图标动画
移动端菜单按钮打开关闭css3小图标动画,保存以便备用
运行代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>移动端菜单按钮打开关闭css3小图标动画</title> </head> <style> body,html{ height: 100%; display: flex; justify-content: center; align-items: center; } .menu{ width: 40px; height: 40px; position: relative; color: black; border: 1px solid; } .menu::after,.menu::before{ content: ""; display: block; position: absolute; left: 20%; right: 20%; top:50%; height: 3px; border-radius: 100px; background: currentColor; transform: translateY(-50%); transition: all ease .3s; } .menu::after{ box-shadow: 0 -8px currentColor,0 8px currentColor; } .menu.close::after{ box-shadow:none; } .menu.close::after{ transform: translateY(-50%) rotate(45deg); } .menu.close::before{ transform: translateY(-50%) rotate(-45deg); } </style> <body> <div class="menu close"></div> <script> //aihongxin.com let menu = document.getElementsByClassName("menu")[0]; let a = true; menu.onclick = function(){ if(a){ this.className = "menu" a = false } else{ this.className = "menu close" a = true } } </script> </body> </html>