{"html":"\n

\n \n \n \n

\n\n","css":".square {\n border: 1px solid #5e42a6;\n height: 26px;\n width: 26px;\n display: block;\n margin: 40px auto;\n transform: rotate(45deg);\n overflow: hidden;\n cursor: pointer;\n -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n /* custom */\n}\n\n.square .burgerwrap {\n height: 18px;\n width: 21px;\n transform: rotate(-45deg);\n padding-left: 2px;\n padding-top: 8px;\n -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n /* custom */\n}\n\n.square:hover {\n transform: rotate(135deg);\n border: 1px solid #fff;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 5px rgba(255, 255, 255, 0.5),\n 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5),\n 0 0 40px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.5),\n 0 0 60px rgba(255, 255, 255, 0.5);\n}\n\n.square:hover .burgerwrap {\n transform: rotate(-135deg);\n}\n\n.square span {\n height: 2px;\n width: 14px;\n background: linear-gradient(145deg, #5e42a6, #b46be4);\n display: block;\n margin-bottom: 2px;\n -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n /* custom */\n}\n\n.square span:after {\n content: \"\";\n height: 2px;\n width: 14px;\n position: absolute;\n background: #fff;\n left: -22px;\n margin-top: -4px;\n -webkit-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n -moz-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n -o-transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n transition: all 500ms cubic-bezier(0.97, 0, 0.395, 0.995);\n /* custom */\n}\n\n.square:hover span {\n margin-left: 26px;\n}\n\n.square:hover span:after {\n left: 0.2px;\n}\n\n.square span:nth-of-type(1),\n.square span:nth-of-type(1):after {\n transition-delay: 0.1s;\n}\n\n.square span:nth-of-type(2),\n.square span:nth-of-type(2):after {\n transition-delay: 0.2s;\n}\n\n.square span:nth-of-type(3),\n.square span:nth-of-type(3):after {\n transition-delay: 0.3s;\n}\n"}

shy-fireant-5

👁 实时预览

📝 源代码