{"html":"

\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.macbook {\n position: relative;\n width: 228px;\n height: 260px;\n}\n.macbook__topBord {\n position: absolute;\n z-index: 0;\n top: 34px;\n left: 0;\n width: 128px;\n height: 116px;\n border-radius: 6px;\n transform-origin: center;\n background: linear-gradient(-135deg, #c8c9c9 52%, #8c8c8c 56%);\n transform: scale(0) skewY(-30deg);\n animation: topbord 0.4s 1.7s ease-out;\n animation-fill-mode: forwards;\n}\n.macbook__topBord::before {\n content: \"\";\n position: absolute;\n z-index: 2;\n top: 8px;\n left: 6px;\n width: 100%;\n height: 100%;\n border-radius: 6px;\n background: #000;\n}\n.macbook__topBord::after {\n content: \"\";\n position: absolute;\n z-index: 1;\n bottom: -7px;\n left: 8px;\n width: 168px;\n height: 12px;\n transform-origin: left bottom;\n transform: rotate(-42deg) skew(-4deg);\n background: linear-gradient(-135deg, #c8c9c9 52%, #8c8c8c 56%);\n}\n.macbook__display {\n position: absolute;\n z-index: 10;\n top: 17px;\n left: 12px;\n z-index: 2;\n width: calc(100% - 12px);\n height: calc(100% - 18px);\n background: linear-gradient(45deg, #3ba9ff, #c82aff);\n}\n.macbook__display::before {\n content: \"\";\n position: absolute;\n z-index: 5;\n top: -9px;\n left: -6px;\n width: calc(100% + 12px);\n height: calc(100% + 18px);\n border-radius: 6px;\n background: linear-gradient(\n 60deg,\n rgba(255, 255, 255, 0) 60%,\n rgba(255, 255, 255, 0.3) 60%\n );\n}\n.macbook__load {\n position: relative;\n width: 100%;\n height: 100%;\n background: #222;\n animation: display 0.4s 4.3s ease;\n opacity: 1;\n animation-fill-mode: forwards;\n}\n.macbook__load:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n width: 80px;\n height: 6px;\n border-radius: 3px;\n box-sizing: border-box;\n border: solid 1px #fff;\n}\n.macbook__load:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 18px;\n bottom: 0;\n margin: auto;\n width: 0;\n height: 6px;\n border-radius: 3px;\n background: #fff;\n animation: load 2s 2s ease-out;\n animation-fill-mode: forwards;\n}\n.macbook__underBord {\n position: relative;\n left: 42px;\n bottom: -145px;\n width: 150px;\n height: 90px;\n border-radius: 6px;\n transform-origin: center;\n transform: rotate(-30deg) skew(30deg);\n background: linear-gradient(-45deg, #c8c9c9 61%, #8c8c8c 66%);\n animation: modal 0.5s 1s ease-out;\n opacity: 0;\n animation-fill-mode: forwards;\n}\n.macbook__underBord::before {\n content: \"\";\n position: absolute;\n z-index: 3;\n top: -8px;\n left: 8px;\n width: 100%;\n height: 100%;\n border-radius: 6px;\n background: #dcdede;\n}\n.macbook__underBord::after {\n content: \"\";\n position: absolute;\n z-index: 2;\n top: -8px;\n left: 12px;\n width: 170px;\n height: 15px;\n transform-origin: top left;\n background: linear-gradient(-45deg, #c8c9c9 61%, #8c8c8c 66%);\n transform: rotate(31deg) skew(-16deg);\n}\n.macbook__keybord {\n position: relative;\n top: 0;\n left: 16px;\n z-index: 3;\n border-radius: 3px;\n width: calc(100% - 16px);\n height: 45px;\n background: #c8c9c9;\n}\n.macbook__keybord::before {\n content: \"\";\n position: absolute;\n bottom: -30px;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background: #c8c9c9;\n}\n.keybord {\n position: relative;\n top: 2px;\n left: 2px;\n display: flex;\n flex-direction: column;\n width: calc(100% - 3px);\n height: calc(100% - 4px);\n}\n.keybord__touchbar {\n width: 100%;\n height: 6px;\n border-radius: 3px;\n background: #000;\n}\n.keybord__keyBox {\n display: grid;\n grid-template-rows: 3fr 1fr;\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n width: 100%;\n height: 24px;\n margin: 1px 0 0 0;\n padding: 0 0 0 1px;\n box-sizing: border-box;\n list-style: none;\n}\n.keybord__key {\n position: relative;\n width: 8px;\n height: 7px;\n margin: 1px;\n background: #000;\n}\n.keybord__keyBox .keybord__key {\n transform: translate(60px, -60px);\n animation: key 0.2s 1.4s ease-out;\n animation-fill-mode: forwards;\n opacity: 0;\n}\n.keybord__keyBox .keybord__key::before,\n.keybord__keyBox .keybord__key::after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n height: 100%;\n background: #000;\n}\n.keybord__key::before {\n top: 8px;\n transform: translate(20px, -20px);\n animation: key1 0.2s 1.5s ease-out;\n animation-fill-mode: forwards;\n}\n.keybord__key::after {\n top: 16px;\n transform: translate(40px, -40px);\n animation: key2 0.2s 1.6s ease-out;\n animation-fill-mode: forwards;\n}\n.keybord__keyBox .key--12::before {\n width: 10px;\n}\n.keybord__keyBox .key--13::before {\n height: 10px;\n}\n.key--01 {\n grid-row: 1 / 2;\n grid-column: 1 / 2;\n}\n.key--02 {\n grid-row: 1 / 2;\n grid-column: 2 / 3;\n}\n.key--03 {\n grid-row: 1 / 2;\n grid-column: 3 / 4;\n}\n.key--04 {\n grid-row: 1 / 2;\n grid-column: 4 / 5;\n}\n.key--05 {\n grid-row: 1 / 2;\n grid-column: 5 / 6;\n}\n.key--06 {\n grid-row: 1 / 2;\n grid-column: 6 / 7;\n}\n.key--07 {\n grid-row: 1 / 2;\n grid-column: 7 / 8;\n}\n.key--08 {\n grid-row: 1 / 2;\n grid-column: 8 / 9;\n}\n.key--09 {\n grid-row: 1 / 2;\n grid-column: 9 / 10;\n}\n.key--10 {\n grid-row: 1 / 2;\n grid-column: 10 / 11;\n}\n.key--11 {\n grid-row: 1 / 2;\n grid-column: 11 / 12;\n}\n.key--12 {\n grid-row: 1 / 2;\n grid-column: 12 / 13;\n}\n.key--13 {\n grid-row: 1 / 2;\n grid-column: 13 / 14;\n}\n.keybord__keyBox--under {\n margin: 0;\n padding: 0 0 0 1px;\n box-sizing: border-box;\n list-style: none;\n display: flex;\n}\n.keybord__keyBox--under .keybord__key {\n transform: translate(80px, -80px);\n animation: key3 0.3s 1.6s linear;\n animation-fill-mode: forwards;\n opacity: 0;\n}\n.key--19 {\n width: 28px;\n}\n@keyframes topbord {\n 0% {\n transform: scale(0) skewY(-30deg);\n }\n 30% {\n transform: scale(1.1) skewY(-30deg);\n }\n 45% {\n transform: scale(0.9) skewY(-30deg);\n }\n 60% {\n transform: scale(1.05) skewY(-30deg);\n }\n 75% {\n transform: scale(0.95) skewY(-30deg);\n }\n 90% {\n transform: scale(1.02) skewY(-30deg);\n }\n 100% {\n transform: scale(1) skewY(-30deg);\n }\n}\n@keyframes display {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes load {\n 0% {\n width: 0;\n }\n 20% {\n width: 40px;\n }\n 30% {\n width: 40px;\n }\n 60% {\n width: 60px;\n }\n 90% {\n width: 60px;\n }\n 100% {\n width: 80px;\n }\n}\n\n@keyframes modal {\n 0% {\n transform: scale(0) rotate(-30deg) skew(30deg);\n opacity: 0;\n }\n 30% {\n transform: scale(1.1) rotate(-30deg) skew(30deg);\n opacity: 1;\n }\n 45% {\n transform: scale(0.9) rotate(-30deg) skew(30deg);\n opacity: 1;\n }\n 60% {\n transform: scale(1.05) rotate(-30deg) skew(30deg);\n opacity: 1;\n }\n 75% {\n transform: scale(0.95) rotate(-30deg) skew(30deg);\n opacity: 1;\n }\n 90% {\n transform: scale(1.02) rotate(-30deg) skew(30deg);\n opacity: 1;\n }\n 100% {\n transform: scale(1) rotate(-30deg) skew(30deg);\n opacity: 1;\n }\n}\n\n@keyframes key {\n 0% {\n transform: translate(60px, -60px);\n opacity: 0;\n }\n 100% {\n transform: translate(0px, 0px);\n opacity: 1;\n }\n}\n@keyframes key1 {\n 0% {\n transform: translate(20px, -20px);\n opacity: 0;\n }\n 100% {\n transform: translate(0px, 0px);\n opacity: 1;\n }\n}\n@keyframes key2 {\n 0% {\n transform: translate(40px, -40px);\n opacity: 0;\n }\n 100% {\n transform: translate(0px, 0px);\n opacity: 1;\n }\n}\n@keyframes key3 {\n 0% {\n transform: translate(80px, -80px);\n opacity: 0;\n }\n 100% {\n transform: translate(0px, 0px);\n opacity: 1;\n }\n}\n"}

kind-bat-54

👁 实时预览

📝 源代码