20
* { margin:0 auto; padding:0; } html,body { height:100%; display:flex; justify-content:center; align-items:center; background:royalblue; } main { width:400px; height:160px; cursor:pointer; /* border:1px solid white; */ } #kongtiao { width:100%; height:150px; background:white; /* overflow:hidden; */ box-shadow:2px 2px 5px rgba(105,104,104,0.452); /* border-bottom-left-radius:30px; border-bottom-right-radius:30px; */ } .kt-t { width:350px; height:110px; /* background:red; */ box-shadow:2px 2px 5px rgba(105,104,104,0.452); position:relative; } .kt-t .bs { height:50px; position:absolute; left:45px; } .kt-ts { width:100px; height:23px; background:rgb(58,57,57); position:relative; top:75px; font-family:"Digital Dismay"; color:yellow; text-align:center; line-height:23px; } .kt-ts::before { content:'GREE 格力'; font-size:12px; font-weight:bold; font-family:'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif; color:rgb(221,220,220); text-align:center; position:absolute; width:100px; top:-25px; left:-2px; } .kt-ts .fk { height:13px; position:absolute; left:22px; top:4px; filter:hue-rotate(260deg); opacity:0; transition:0.5s; } main:hover .fk { opacity:1; } .off { width:10px; height:10px; border-radius:50%; border:1px solid red; border-top:1px solid transparent; position:absolute; right:22px; top:5px; transition:0.5s; } .off::before { content:''; width:1px; height:7px; background:red; position:absolute; left:4.5px; top:-2px; transition:0.5s; } main:hover .off { border:1px solid yellow; border-top:1px solid transparent; } main:hover .off::before { background:yellow; } .kt-b { width:350px; height:34px; position:relative; top:6px; background:rgb(78,77,77); box-shadow:0px 2px 2px rgba(105,104,104,0.452); perspective:1000px; } #lr { width:70px; height:25px; /* border:1px solid white; */ display:flex; justify-content:center; align-items:center; position:relative; position:absolute; bottom:3px; } #lr::before { content:''; width:55px; height:1px; background:white; position:absolute; bottom:8px; transform:translateX(-5px); } main:hover #lr::before { animation:lr 8s linear infinite alternate; animation-delay:5s; } #lr section { width:7px; height:20px; background:white; transform-style:preserve-3d; transform-origin:0% 50%; transform:rotateY(-85deg); } main:hover #lr section { animation:lrs 8s linear infinite alternate; animation-delay:5s; } @keyframes lrs { 0% { }50% { transform:rotateY(0deg) } 100% { transform-origin:100% 50%; transform:rotateY(85deg); } }@keyframes lr { 0% { }50% { transform:translateX(0px) } 100% { transform:translateX(5px) } }#lr:nth-of-type(1) { left:20px; } #lr:nth-of-type(2) { left:140px; } #lr:nth-of-type(3) { right:20px; } .kt-bt,.kt-bb { width:350px; height:17px; background:white; position:absolute; box-sizing:border-box; transform-origin:50% 70%; transform-style:preserve-3d; transition:5s; } main:hover .kt-bt { transform:rotateX(-120deg); } main:hover .kt-bb { transform:rotateX(-120deg); } .kt-bb { border-top:0.5px solid rgba(160,159,159,0.589); bottom:0px; } span { opacity:0; transition:0.5s; } main:hover span { opacity:1; }
部分图片未显示,鼠标经过,空调开机