{"html":"

\n \n \n

\n","css":"/*************/\n/* Variables */\n/*************/\n\n.btn-container {\n --pupil-color: rgb(156, 207, 255);\n --pupil-move: 20%;\n --sensor-height: 130dvmax;\n --sensor-width: calc(var(--sensor-height) * 82.84 / 100);\n}\n.btn-button {\n --back-color: #fff;\n}\n.btn-lid {\n --back-color: transparent;\n}\n\n/**********/\n/* Styles */\n/**********/\n\n/* Container */\n.btn-container {\n position: relative;\n}\n\n/* Button */\n.btn-button {\n background: #fff;\n border: 3px solid #000;\n border-radius: 10rem;\n cursor: pointer;\n padding: 2rem;\n position: relative;\n z-index: 100;\n}\n.btn-button:hover,\n.btn-button:hover .btn-lid {\n animation: squint 100ms forwards;\n}\n.btn-button:active .btn-pupil {\n animation: agitate 100ms infinite 500ms;\n border-width: 0.5rem;\n padding: 1rem;\n}\n\n.btn-lid {\n border-radius: 10rem;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 101;\n}\n\n.btn-pupil {\n background: #000;\n border: 0.8rem solid var(--pupil-color);\n border-radius: 10rem;\n padding: 0.7rem;\n transition: all 200ms ease-out;\n}\n\n/* Sensors */\n.btn-sensor {\n clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);\n height: var(--sensor-height);\n left: calc(50% - var(--sensor-width) / 2);\n overflow: hidden;\n position: absolute;\n top: calc(50% - var(--sensor-height) / 2);\n transform: rotate(calc(var(--a) * 1deg))\n translateY(calc(var(--sensor-height) * -50 / 100));\n width: var(--sensor-width);\n z-index: 99;\n}\n\n/************/\n/* Tracking */\n/************/\n\n.sensor-n:hover ~ .btn-button .btn-pupil {\n transform: translateX(0) translateY(calc(-3 * var(--pupil-move)));\n}\n.sensor-ne:hover ~ .btn-button .btn-pupil {\n transform: translateX(calc(2 * var(--pupil-move)))\n translateY(calc(-2 * var(--pupil-move)));\n}\n.sensor-e:hover ~ .btn-button .btn-pupil {\n transform: translateX(calc(3 * var(--pupil-move))) translateY(0);\n}\n.sensor-se:hover ~ .btn-button .btn-pupil {\n transform: translateX(calc(2 * var(--pupil-move)))\n translateY(calc(2 * var(--pupil-move)));\n}\n.sensor-s:hover ~ .btn-button .btn-pupil {\n transform: translateX(0) translateY(calc(3 * var(--pupil-move)));\n}\n.sensor-sw:hover ~ .btn-button .btn-pupil {\n transform: translateX(calc(-2 * var(--pupil-move)))\n translateY(calc(2 * var(--pupil-move)));\n}\n.sensor-w:hover ~ .btn-button .btn-pupil {\n transform: translateX(calc(-3 * var(--pupil-move))) translateY(0);\n}\n.sensor-nw:hover ~ .btn-button .btn-pupil {\n transform: translateX(calc(-2 * var(--pupil-move)))\n translateY(calc(-2 * var(--pupil-move)));\n}\n\n/**************/\n/* Animations */\n/**************/\n\n@keyframes agitate {\n 0% {\n transform: scale(1.2) translate(0%, -10%);\n }\n\n 25% {\n transform: scale(1.2) translate(-10%, 10%);\n }\n\n 50% {\n transform: scale(1.2) translate(10%, -5%);\n }\n\n 75% {\n transform: scale(1.2) translate(-10%, -5%);\n }\n\n 100% {\n transform: scale(1.2) translate(10%, 10%);\n }\n}\n\n@keyframes squint {\n 0% {\n background: var(--back-color);\n }\n\n 25% {\n background: linear-gradient(\n 0deg,\n #000 0% 9%,\n var(--back-color) 10% 90%,\n #000 91% 100%\n );\n }\n\n 50% {\n background: linear-gradient(\n 0deg,\n #000 0% 18%,\n var(--back-color) 19% 81%,\n #000 82% 100%\n );\n }\n\n 75% {\n background: linear-gradient(\n 0deg,\n #000 0% 27%,\n var(--back-color) 28% 72%,\n #000 73% 100%\n );\n }\n\n 100% {\n background: linear-gradient(\n 0deg,\n #000 0% 35%,\n var(--back-color) 36% 64%,\n #000 65% 100%\n );\n }\n}\n"}

slippery-mole-69

👁 实时预览

📝 源代码