Layer 1

{"html":"

\n MacBook Air\n

\n Layer 1\n

\n","css":".macbook {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -85px 0 0 -78px;\n perspective: 500px;\n}\n\n.shadow {\n position: absolute;\n width: 60px;\n height: 0px;\n left: 40px;\n top: 160px;\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n animation: shadow infinite 7s ease;\n}\n\n.inner {\n z-index: 20;\n position: absolute;\n width: 150px;\n height: 96px;\n left: 0;\n top: 0;\n transform-style: preserve-3d;\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n animation: rotate infinite 7s ease;\n}\n\n.screen {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #ddd;\n transform-style: preserve-3d;\n transform-origin: 50% 93px;\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n animation: lid-screen infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);\n background-position: left bottom;\n background-size: 300px 300px;\n box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);\n}\n\n.screen .logo {\n position: absolute;\n width: 20px;\n height: 24px;\n left: 50%;\n top: 50%;\n margin: -12px 0 0 -10px;\n transform: rotateY(180deg) translateZ(0.1px);\n}\n\n.screen .face-one {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #d3d3d3;\n transform: translateZ(2px);\n background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.screen .face-one .camera {\n width: 3px;\n height: 3px;\n border-radius: 100%;\n background: #000;\n position: absolute;\n left: 50%;\n top: 4px;\n margin-left: -1.5px;\n}\n\n.screen .face-one .display {\n width: 130px;\n height: 74px;\n margin: 10px;\n background-color: #000;\n background-size: 100% 100%;\n border-radius: 1px;\n position: relative;\n box-shadow: inset 0 0 2px rgba(0,0,0,1);\n}\n\n.screen .face-one .display .shade {\n position: absolute;\n left: 0;\n top: 0;\n width: 130px;\n height: 74px;\n background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);\n animation: screen-shade infinite 7s ease;\n background-size: 300px 200px;\n background-position: 0px 0px;\n}\n\n.screen .face-one span {\n position: absolute;\n top: 85px;\n left: 57px;\n font-size: 6px;\n color: #666\n}\n\n.macbody {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n background: #cbcbcb;\n transform-style: preserve-3d;\n transform-origin: 50% bottom;\n transform: rotateX(-90deg);\n animation: lid-macbody infinite 7s ease;\n background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .face-one {\n width: 150px;\n height: 96px;\n position: absolute;\n left: 0;\n bottom: 0;\n border-radius: 7px;\n transform-style: preserve-3d;\n background: #dfdfdf;\n animation: lid-keyboard-area infinite 7s ease;\n transform: translateZ(-2px);\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n}\n\n.macbody .touchpad {\n width: 40px;\n height: 31px;\n position: absolute;\n left: 50%;\n top: 50%;\n border-radius: 4px;\n margin: -44px 0 0 -18px;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n box-shadow: inset 0 0 3px #888;\n}\n\n.macbody .keyboard {\n width: 130px;\n height: 45px;\n position: absolute;\n left: 7px;\n top: 41px;\n border-radius: 4px;\n transform-style: preserve-3d;\n background: #cdcdcd;\n background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);\n box-shadow: inset 0 0 3px #777;\n padding: 0 0 0 2px;\n}\n\n.keyboard .key {\n width: 6px;\n height: 6px;\n background: #444;\n float: left;\n margin: 1px;\n transform: translateZ(-2px);\n border-radius: 2px;\n box-shadow: 0 -2px 0 #222;\n animation: keys infinite 7s ease;\n}\n\n.key.space {\n width: 45px;\n}\n\n.key.f {\n height: 3px;\n}\n\n.macbody .pad {\n width: 5px;\n height: 5px;\n background: #333;\n border-radius: 100%;\n position: absolute;\n}\n\n.pad.one {\n left: 20px;\n top: 20px;\n}\n\n.pad.two {\n right: 20px;\n top: 20px;\n}\n\n.pad.three {\n right: 20px;\n bottom: 20px;\n}\n\n.pad.four {\n left: 20px;\n bottom: 20px;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n }\n\n 5% {\n transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);\n }\n\n 25% {\n transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);\n }\n\n 60% {\n transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);\n }\n\n 65% {\n transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);\n }\n\n 80% {\n transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);\n }\n\n 85% {\n transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);\n }\n\n 87% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n\n 100% {\n transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);\n }\n}\n\n@keyframes lid-screen {\n 0% {\n transform: rotateX(0deg);\n background-position: left bottom;\n }\n\n 5% {\n transform: rotateX(50deg);\n background-position: left bottom;\n }\n\n 20% {\n transform: rotateX(-90deg);\n background-position: -150px top;\n }\n\n 25% {\n transform: rotateX(15deg);\n background-position: left bottom;\n }\n\n 30% {\n transform: rotateX(-5deg);\n background-position: right top;\n }\n\n 38% {\n transform: rotateX(5deg);\n background-position: right top;\n }\n\n 48% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 90% {\n transform: rotateX(0deg);\n background-position: right top;\n }\n\n 100% {\n transform: rotateX(0deg);\n background-position: right center;\n }\n}\n\n@keyframes lid-macbody {\n 0% {\n transform: rotateX(-90deg);\n }\n\n 50% {\n transform: rotateX(-90deg);\n }\n\n 100% {\n transform: rotateX(-90deg);\n }\n}\n\n@keyframes lid-keyboard-area {\n 0% {\n background-color: #dfdfdf;\n }\n\n 50% {\n background-color: #bbb;\n }\n\n 100% {\n background-color: #dfdfdf;\n }\n}\n\n@keyframes screen-shade {\n 0% {\n background-position: -20px 0px;\n }\n\n 5% {\n background-position: -40px 0px;\n }\n\n 20% {\n background-position: 200px 0;\n }\n\n 50% {\n background-position: -200px 0;\n }\n\n 80% {\n background-position: 0px 0px;\n }\n\n 85% {\n background-position: -30px 0;\n }\n\n 90% {\n background-position: -20px 0;\n }\n\n 100% {\n background-position: -20px 0px;\n }\n}\n\n@keyframes keys {\n 0% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 5% {\n box-shadow: 1 -1px 0 #222;\n }\n\n 20% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 25% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 60% {\n box-shadow: -1px 1px 0 #222;\n }\n\n 80% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 85% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 87% {\n box-shadow: 0 -2px 0 #222;\n }\n\n 100% {\n box-shadow: 0 -2px 0 #222;\n }\n}\n\n@keyframes shadow {\n 0% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 5% {\n transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 20% {\n transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);\n box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);\n }\n\n 25% {\n transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);\n box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);\n }\n\n 60% {\n transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n\n 100% {\n box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);\n }\n}\n"}

clever-bullfrog-59

👁 实时预览

📝 源代码