Your Content

”,”css”:”\n@font-face {\n font-family: ‘Open Sans’;\n font-style: normal;\n font-weight: 300;\n src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format(‘truetype’);\n}\n@font-face {\n font-family: ‘Pacifico’;\n font-style: normal;\n font-weight: 400;\n src: url(https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6Mw.ttf) format(‘truetype’);\n}\n.flex-center {\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n}\n* {\n box-sizing: border-box;\n font-family: ‘Open Sans’, sans-serif;\n font-weight: 300;\n}\na,\na:visited,\na:hover,\na:active {\n color: inherit;\n text-decoration: none;\n}\nh1 {\n font-family: ‘Pacifico’, cursive;\n font-weight: 400;\n font-size: 3em;\n text-align: center;\n}\n.outer-menu {\n position: fixed;\n top: 10vh;\n left: 0;\n z-index: 1;\n}\n.outer-menu .checkbox-toggle {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n cursor: pointer;\n width: 60px;\n height: 60px;\n opacity: 0;\n}\n.outer-menu .checkbox-toggle:checked + .hamburger > div {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n}\n.outer-menu .checkbox-toggle:checked + .hamburger > div:before,\n.outer-menu .checkbox-toggle:checked + .hamburger > div:after {\n top: 0;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n.outer-menu .checkbox-toggle:checked + .hamburger > div:after {\n opacity: 0;\n}\n.outer-menu .checkbox-toggle:checked ~ .menu {\n pointer-events: auto;\n visibility: visible;\n}\n.outer-menu .checkbox-toggle:checked ~ .menu > div {\n -webkit-transform: scale(1);\n transform: scale(1);\n -webkit-transition-duration: 0.75s;\n transition-duration: 0.75s;\n}\n.outer-menu .checkbox-toggle:checked ~ .menu > div > div {\n opacity: 1;\n -webkit-transition: opacity 0.4s ease 0.4s;\n transition: opacity 0.4s ease 0.4s;\n}\n.outer-menu .checkbox-toggle:hover + .hamburger {\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);\n}\n.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {\n -webkit-transform: rotate(225deg);\n transform: rotate(225deg);\n}\n.outer-menu .hamburger {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 60px;\n height: 60px;\n padding: 0.5em 1em;\n background: rgba(33, 150, 243, 0.75);\n border-radius: 0 0.12em 0.12em 0;\n cursor: pointer;\n -webkit-transition: box-shadow 0.4s ease;\n transition: box-shadow 0.4s ease;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n}\n.outer-menu .hamburger > div {\n position: relative;\n -webkit-box-flex: 0;\n flex: none;\n width: 100%;\n height: 2px;\n background: #FEFEFE;\n -webkit-transition: all 0.4s ease;\n transition: all 0.4s ease;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n}\n.outer-menu .hamburger > div:before,\n.outer-menu .hamburger > div:after {\n content: ‘’;\n position: absolute;\n z-index: 1;\n top: -10px;\n left: 0;\n width: 100%;\n height: 2px;\n background: inherit;\n -webkit-transition: all 0.4s ease;\n transition: all 0.4s ease;\n}\n.outer-menu .hamburger > div:after {\n top: 10px;\n}\n.outer-menu .menu {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n visibility: hidden;\n overflow: hidden;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n outline: 1px solid transparent;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n}\n.outer-menu .menu > div {\n width: 200vw;\n height: 200vw;\n color: #FEFEFE;\n background: rgba(41, 98, 255, 0.97);\n border-radius: 50%;\n -webkit-transition: all 0.4s ease;\n transition: all 0.4s ease;\n -webkit-box-flex: 0;\n flex: none;\n -webkit-transform: scale(0);\n transform: scale(0);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n overflow: hidden;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n}\n.outer-menu .menu > div > div {\n text-align: center;\n max-width: 90vw;\n max-height: 100vh;\n opacity: 0;\n -webkit-transition: opacity 0.4s ease;\n transition: opacity 0.4s ease;\n overflow-y: auto;\n -webkit-box-flex: 0;\n flex: none;\n display: -webkit-box;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n}\n.outer-menu .menu > div > div > ul {\n list-style: none;\n padding: 0 1em;\n margin: 0;\n display: block;\n max-height: 100vh;\n}\n.outer-menu .menu > div > div > ul > li {\n padding: 0;\n margin: 1em;\n font-size: 24px;\n display: block;\n}\n.outer-menu .menu > div > div > ul > li > a {\n position: relative;\n display: inline;\n cursor: pointer;\n -webkit-transition: color 0.4s ease;\n transition: color 0.4s ease;\n}\n.outer-menu .menu > div > div > ul > li > a:hover {\n color: #e5e5e5;\n}\n.outer-menu .menu > div > div > ul > li > a:hover:after {\n width: 100%;\n}\n.outer-menu .menu > div > div > ul > li > a:after {\n content: ‘’;\n position: absolute;\n z-index: 1;\n bottom: -0.15em;\n left: 0;\n width: 0;\n height: 2px;\n background: #e5e5e5;\n -webkit-transition: width 0.4s ease;\n transition: width 0.4s ease;\n}”,”js”:””},”options”:{“activeKey”:”player”,”hide”:{“html”:false,”css”:false,”js”:false},”name”:{“html”:”HTML”,”css”:”CSS”,”js”:”JavaScript”},”layout”:”left”,”profile”:{“html”:””,”css”:”type="text/css"”,”js”:””},”mode”:{“html”:”htmlmixed”,”css”:”css”,”js”:”javascript”}}}</div>

</div>

第4274篇《纯CSS全屏导航菜单》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点