{"html":"\n","css":".menu-item,\n.menu-open-button {\n background: #eeeeee;\n border-radius: 100%;\n width: 80px;\n height: 80px;\n margin-left: -40px;\n position: absolute;\n color: #ffffff;\n text-align: center;\n line-height: 80px;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n -webkit-transition: -webkit-transform ease-out 200ms;\n transition: -webkit-transform ease-out 200ms;\n transition: transform ease-out 200ms;\n}\n\n.menu-open {\n display: none;\n}\n\n.lines {\n width: 25px;\n height: 3px;\n background: #596778;\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: -12.5px;\n margin-top: -1.5px;\n -webkit-transition: -webkit-transform 200ms;\n transition: -webkit-transform 200ms;\n transition: transform 200ms;\n}\n\n.line-1 {\n -webkit-transform: translate3d(0, -8px, 0);\n transform: translate3d(0, -8px, 0);\n}\n\n.line-2 {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n\n.line-3 {\n -webkit-transform: translate3d(0, 8px, 0);\n transform: translate3d(0, 8px, 0);\n}\n\n.menu-open:checked + .menu-open-button .line-1 {\n -webkit-transform: translate3d(0, 0, 0) rotate(45deg);\n transform: translate3d(0, 0, 0) rotate(45deg);\n}\n\n.menu-open:checked + .menu-open-button .line-2 {\n -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);\n transform: translate3d(0, 0, 0) scale(0.1, 1);\n}\n\n.menu-open:checked + .menu-open-button .line-3 {\n -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);\n transform: translate3d(0, 0, 0) rotate(-45deg);\n}\n\n.menu {\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 80px;\n height: 80px;\n text-align: center;\n box-sizing: border-box;\n font-size: 26px;\n}\n\n/* .menu-item {\n transition: all 0.1s ease 0s;\n} */\n\n.menu-item:hover {\n background: #eeeeee;\n color: #091974;\n}\n\n.menu-item:nth-child(3) {\n -webkit-transition-duration: 180ms;\n transition-duration: 180ms;\n}\n\n.menu-item:nth-child(4) {\n -webkit-transition-duration: 180ms;\n transition-duration: 180ms;\n}\n\n.menu-item:nth-child(5) {\n -webkit-transition-duration: 180ms;\n transition-duration: 180ms;\n}\n\n.menu-item:nth-child(6) {\n -webkit-transition-duration: 180ms;\n transition-duration: 180ms;\n}\n\n.menu-item:nth-child(7) {\n -webkit-transition-duration: 180ms;\n transition-duration: 180ms;\n}\n\n.menu-item:nth-child(8) {\n -webkit-transition-duration: 180ms;\n transition-duration: 180ms;\n}\n\n.menu-item:nth-child(9) {\n -webkit-transition-duration: 180ms;\n transition-duration: 180ms;\n}\n\n.menu-open-button {\n z-index: 2;\n -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n -webkit-transition-duration: 400ms;\n transition-duration: 400ms;\n -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);\n transform: scale(1.1, 1.1) translate3d(0, 0, 0);\n cursor: pointer;\n box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);\n}\n\n.menu-open-button:hover {\n -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);\n transform: scale(1.2, 1.2) translate3d(0, 0, 0);\n}\n\n.menu-open:checked + .menu-open-button {\n -webkit-transition-timing-function: linear;\n transition-timing-function: linear;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);\n transform: scale(0.8, 0.8) translate3d(0, 0, 0);\n}\n\n.menu-open:checked ~ .menu-item {\n -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);\n transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);\n}\n\n.menu-open:checked ~ .menu-item:nth-child(3) {\n transition-duration: 180ms;\n -webkit-transition-duration: 180ms;\n -webkit-transform: translate3d(0.08361px, -104.99997px, 0);\n transform: translate3d(0.08361px, -104.99997px, 0);\n}\n\n.menu-open:checked ~ .menu-item:nth-child(4) {\n transition-duration: 280ms;\n -webkit-transition-duration: 280ms;\n -webkit-transform: translate3d(90.9466px, -52.47586px, 0);\n transform: translate3d(90.9466px, -52.47586px, 0);\n}\n\n.menu-open:checked ~ .menu-item:nth-child(5) {\n transition-duration: 380ms;\n -webkit-transition-duration: 380ms;\n -webkit-transform: translate3d(90.9466px, 52.47586px, 0);\n transform: translate3d(90.9466px, 52.47586px, 0);\n}\n\n.menu-open:checked ~ .menu-item:nth-child(6) {\n transition-duration: 480ms;\n -webkit-transition-duration: 480ms;\n -webkit-transform: translate3d(0.08361px, 104.99997px, 0);\n transform: translate3d(0.08361px, 104.99997px, 0);\n}\n\n.menu-open:checked ~ .menu-item:nth-child(7) {\n transition-duration: 580ms;\n -webkit-transition-duration: 580ms;\n -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);\n transform: translate3d(-90.86291px, 52.62064px, 0);\n}\n\n.menu-open:checked ~ .menu-item:nth-child(8) {\n transition-duration: 680ms;\n -webkit-transition-duration: 680ms;\n -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);\n transform: translate3d(-91.03006px, -52.33095px, 0);\n}\n\n.menu-open:checked ~ .menu-item:nth-child(9) {\n transition-duration: 780ms;\n -webkit-transition-duration: 780ms;\n -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);\n transform: translate3d(-0.25084px, -104.9997px, 0);\n}\n\n.blue {\n background-color: #b908ff;\n box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);\n text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);\n}\n\n.blue:hover {\n color: #669ae1;\n text-shadow: none;\n}\n\n.green {\n background-color: #70cc72;\n box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);\n text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);\n}\n\n.green:hover {\n color: #70cc72;\n text-shadow: none;\n}\n\n.red {\n background-color: #fe4365;\n box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);\n text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);\n}\n\n.red:hover {\n color: #fe4365;\n text-shadow: none;\n}\n\n.purple {\n background-color: #c49cde;\n box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);\n text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);\n}\n\n.purple:hover {\n color: #c49cde;\n text-shadow: none;\n}\n\n.orange {\n background-color: #fc913a;\n box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);\n text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);\n}\n\n.orange:hover {\n color: #fc913a;\n text-shadow: none;\n}\n\n.lightblue {\n background-color: #62c2e4;\n box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);\n text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);\n}\n\n.lightblue:hover {\n color: #62c2e4;\n text-shadow: none;\n}\n\n.credit {\n margin: 24px 20px 120px 0;\n text-align: right;\n color: #eeeeee;\n}\n\n.credit a {\n padding: 8px 0;\n color: #c49cde;\n text-decoration: none;\n transition: all 0.3s ease 0s;\n}\n\n.credit a:hover {\n text-decoration: underline;\n}\n"}

proud-emu-92

👁 实时预览

📝 源代码