.machine { width:484px; height:513px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); display:-webkit-box; display:-ms-flexbox; display:flex; } .machine .machine-body { width:400px; background-color:#c8d0e3; height:513px; border:14px solid #2e2a27; border-radius:34px; -webkit-box-sizing:border-box; box-sizing:border-box; } .machine .machine-body .rotary-table { width:278px; border:16px solid #2e2a27; border-radius:16px; margin:54px auto 0; display:-webkit-box; display:-ms-flexbox; display:flex; } .machine .machine-body .rotary-table .screen { width:82px; height:136px; overflow:hidden; } .machine .machine-body .rotary-table .screen .images { list-style:none; margin:0; padding:0; border:none; } .machine .machine-body .rotary-table .screen .images li { margin:0; padding:0; border:0; text-align:center; height:136px; line-height:136px; font-size:30px; background-color:wheat; } .machine .machine-body .rotary-table .screen .transtion { -webkit-transition:all ease 2s; transition:all ease 2s; } .machine .machine-body .rotary-table:nth-child(1) { border-right:16px solid #2e2a27; } .machine .machine-body .rotary-table:nth-child(2) { border-right:16px solid #2e2a27; } .machine .machine-body .machine-logo { width:240px; margin:20px auto 0; } .machine .machine-body .machine-logo img { width:100%; height:auto; } .machine .base { width:34px; height:130px; background-color:#b1b8d4; border:14px solid #2e2a27; border-left:none; -webkit-box-sizing:border-box; box-sizing:border-box; border-top-right-radius:24px; border-bottom-right-radius:24px; -webkit-transform:translateY(250px); transform:translateY(250px); position:relative; } .machine .base .handle { width:64px; position:absolute; left:30px; bottom:28px; cursor:pointer; } .machine .base .handle .handle-ball { width:34px; height:34px; background-color:#ff6169; border-radius:50%; border:15px solid #2e2a27; -webkit-transform:translateY(2px); transform:translateY(2px); } .machine .base .handle .handle-bar { width:16px; height:106px; margin:0 auto; background-color:#2e2a27; -webkit-transform:translateY(1px); transform:translateY(1px); } .machine .base .handle .handle-shaft { width:56px; height:48px; border:15px solid #2e2a27; border-left:none; border-top-right-radius:25px; border-bottom-right-radius:25px; background-color:#c8d0e3; -webkit-box-sizing:border-box; box-sizing:border-box; margin:0 auto; } .shake { -webkit-animation:shake 0.1s infinite; animation:shake 0.1s infinite; } @-webkit-keyframes shake { 25% { left:49.7%; } 50% { top:49.7%; } 75% { left:50%; } 100% { top:50%; } }@keyframes shake { 25% { left:49.7%; } 50% { top:49.7%; } 75% { left:50%; } 100% { top:50%; } }/*# sourceMappingURL=scss.css.map */
更新时间:2022-04-25 01:24:04
简单css绘制