正在准备设计规范
01.macbook {02 width: 150px;03 height: 96px;04 position: absolute;05 left: 50%;06 top: 50%;07 margin: -85px 0 0 -78px;08 perspective: 500px;09}10 11.shadow {12 position: absolute;13 width: 60px;14 height: 0px;15 left: 40px;16 top: 160px;17 transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);18 box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);19 animation: shadow infinite 7s ease;20}21 22.inner {23 z-index: 20;24 position: absolute;25 width: 150px;26 height: 96px;27 left: 0;28 top: 0;29 transform-style: preserve-3d;30 transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);31 animation: rotate infinite 7s ease;32}33 34.screen {35 width: 150px;36 height: 96px;37 position: absolute;38 left: 0;39 bottom: 0;40 border-radius: 7px;41 background: #ddd;42 transform-style: preserve-3d;43 transform-origin: 50% 93px;44 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);45 animation: lid-screen infinite 7s ease;46 background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);47 background-position: left bottom;48 background-size: 300px 300px;49 box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);50}51 52.screen .logo {53 position: absolute;54 width: 20px;55 height: 24px;56 left: 50%;57 top: 50%;58 margin: -12px 0 0 -10px;59 transform: rotateY(180deg) translateZ(0.1px);60}61 62.screen .face-one {63 width: 150px;64 height: 96px;65 position: absolute;66 left: 0;67 bottom: 0;68 border-radius: 7px;69 background: #d3d3d3;70 transform: translateZ(2px);71 background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);72}73 74.screen .face-one .camera {75 width: 3px;76 height: 3px;77 border-radius: 100%;78 background: #000;79 position: absolute;80 left: 50%;81 top: 4px;82 margin-left: -1.5px;83}84 85.screen .face-one .display {86 width: 130px;87 height: 74px;88 margin: 10px;89 background-color: #000;90 background-size: 100% 100%;91 border-radius: 1px;92 position: relative;93 box-shadow: inset 0 0 2px rgba(0,0,0,1);94}95 96.screen .face-one .display .shade {97 position: absolute;98 left: 0;99 top: 0;100 width: 130px;101 height: 74px;102 background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);103 animation: screen-shade infinite 7s ease;104 background-size: 300px 200px;105 background-position: 0px 0px;106}107 108.screen .face-one span {109 position: absolute;110 top: 85px;111 left: 57px;112 font-size: 6px;113 color: #666114}115 116.macbody {117 width: 150px;118 height: 96px;119 position: absolute;120 left: 0;121 bottom: 0;122 border-radius: 7px;123 background: #cbcbcb;124 transform-style: preserve-3d;125 transform-origin: 50% bottom;126 transform: rotateX(-90deg);127 animation: lid-macbody infinite 7s ease;128 background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);129}130 131.macbody .face-one {132 width: 150px;133 height: 96px;134 position: absolute;135 left: 0;136 bottom: 0;137 border-radius: 7px;138 transform-style: preserve-3d;139 background: #dfdfdf;140 animation: lid-keyboard-area infinite 7s ease;141 transform: translateZ(-2px);142 background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);143}144 145.macbody .touchpad {146 width: 40px;147 height: 31px;148 position: absolute;149 left: 50%;150 top: 50%;151 border-radius: 4px;152 margin: -44px 0 0 -18px;153 background: #cdcdcd;154 background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);155 box-shadow: inset 0 0 3px #888;156}157 158.macbody .keyboard {159 width: 130px;160 height: 45px;161 position: absolute;162 left: 7px;163 top: 41px;164 border-radius: 4px;165 transform-style: preserve-3d;166 background: #cdcdcd;167 background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);168 box-shadow: inset 0 0 3px #777;169 padding: 0 0 0 2px;170}171 172.keyboard .key {173 width: 6px;174 height: 6px;175 background: #444;176 float: left;177 margin: 1px;178 transform: translateZ(-2px);179 border-radius: 2px;180 box-shadow: 0 -2px 0 #222;181 animation: keys infinite 7s ease;182}183 184.key.space {185 width: 45px;186}187 188.key.f {189 height: 3px;190}191 192.macbody .pad {193 width: 5px;194 height: 5px;195 background: #333;196 border-radius: 100%;197 position: absolute;198}199 200.pad.one {201 left: 20px;202 top: 20px;203}204 205.pad.two {206 right: 20px;207 top: 20px;208}209 210.pad.three {211 right: 20px;212 bottom: 20px;213}214 215.pad.four {216 left: 20px;217 bottom: 20px;218}219 220@keyframes rotate {221 0% {222 transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);223 }224 225 5% {226 transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);227 }228 229 20% {230 transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);231 }232 233 25% {234 transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);235 }236 237 60% {238 transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);239 }240 241 65% {242 transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);243 }244 245 80% {246 transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);247 }248 249 85% {250 transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);251 }252 253 87% {254 transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);255 }256 257 100% {258 transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);259 }260}261 262@keyframes lid-screen {263 0% {264 transform: rotateX(0deg);265 background-position: left bottom;266 }267 268 5% {269 transform: rotateX(50deg);270 background-position: left bottom;271 }272 273 20% {274 transform: rotateX(-90deg);275 background-position: -150px top;276 }277 278 25% {279 transform: rotateX(15deg);280 background-position: left bottom;281 }282 283 30% {284 transform: rotateX(-5deg);285 background-position: right top;286 }287 288 38% {289 transform: rotateX(5deg);290 background-position: right top;291 }292 293 48% {294 transform: rotateX(0deg);295 background-position: right top;296 }297 298 90% {299 transform: rotateX(0deg);300 background-position: right top;301 }302 303 100% {304 transform: rotateX(0deg);305 background-position: right center;306 }307}308 309@keyframes lid-macbody {310 0% {311 transform: rotateX(-90deg);312 }313 314 50% {315 transform: rotateX(-90deg);316 }317 318 100% {319 transform: rotateX(-90deg);320 }321}322 323@keyframes lid-keyboard-area {324 0% {325 background-color: #dfdfdf;326 }327 328 50% {329 background-color: #bbb;330 }331 332 100% {333 background-color: #dfdfdf;334 }335}336 337@keyframes screen-shade {338 0% {339 background-position: -20px 0px;340 }341 342 5% {343 background-position: -40px 0px;344 }345 346 20% {347 background-position: 200px 0;348 }349 350 50% {351 background-position: -200px 0;352 }353 354 80% {355 background-position: 0px 0px;356 }357 358 85% {359 background-position: -30px 0;360 }361 362 90% {363 background-position: -20px 0;364 }365 366 100% {367 background-position: -20px 0px;368 }369}370 371@keyframes keys {372 0% {373 box-shadow: 0 -2px 0 #222;374 }375 376 5% {377 box-shadow: 1 -1px 0 #222;378 }379 380 20% {381 box-shadow: -1px 1px 0 #222;382 }383 384 25% {385 box-shadow: -1px 1px 0 #222;386 }387 388 60% {389 box-shadow: -1px 1px 0 #222;390 }391 392 80% {393 box-shadow: 0 -2px 0 #222;394 }395 396 85% {397 box-shadow: 0 -2px 0 #222;398 }399 400 87% {401 box-shadow: 0 -2px 0 #222;402 }403 404 100% {405 box-shadow: 0 -2px 0 #222;406 }407}408 409@keyframes shadow {410 0% {411 transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);412 box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);413 }414 415 5% {416 transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);417 box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);418 }419 420 20% {421 transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);422 box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);423 }424 425 25% {426 transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);427 box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);428 }429 430 60% {431 transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);432 box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);433 }434 435 100% {436 box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);437 }438}