css布局实现一个冰箱开关门效果
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个冰箱开关门效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: sans-serif; background-color: #8eb7cb; color: #fff; } a { color: #085699; text-decoration: none; } p, h1 { display: block; text-align: center; margin-bottom: 5px; } .fridge { position: relative; width: 180px; margin: 30px auto 10px; height: auto; border: 4px solid #555455; background: #fff; display: block; } .fridge:before, .fridge:after { position: absolute; bottom: -8px; width: 8px; height: 0; border: 4px solid transparent; border-top-color: #555455; border-bottom-width: 0; content: ""; } .fridge:before { left: 14px; } .fridge:after { right: 14px; box-shadow: 0 -405px 0 1px #555455; } .fridge .freezer, .fridge .body { position: relative; background-color: #d7e4e7; background-image: linear-gradient(to right, #96a4aa 25%, #b3c5cd 15%); transform-origin: right; transition: all 0.5s ease-in-out; } .fridge .freezer:before, .fridge .freezer:after, .fridge .body:before, .fridge .body:after { position: absolute; top: 7px; right: 10px; width: 5px; height: 45px; border-radius: 5px; background-color: #fff; content: ""; transition: all 0.5s ease-in-out; } .fridge .freezer { height: 95px; border-bottom: 4px solid #555455; } .fridge .freezer .handle { top: 20px; } .fridge .body { height: 300px; } .fridge .body:before { top: 62px; height: auto; bottom: 7px; } .fridge .body .handle { top: 20px; bottom: 170px; } .handle { position: absolute; top: 0; bottom: 15px; left: 15px; width: 5px; border: 3px solid #555455; border-radius: 5px; background-color: #71b5e6; box-sizing: content-box; transition: all 0.5s ease-in-out; } .open-door { transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(120deg); } .open-door .handle, .open-door:before, .open-door:after { opacity: 0; } #food { position: absolute; z-index: 0; padding: 10px; height: 375px; overflow: hidden; } #food img { max-width: 60px; max-height: 35px; } .shelf { position: absolute; width: 172px; z-index: 0; border-bottom: 10px solid #b3c5cd; border-left: 5px solid transparent; border-right: 5px solid transparent; top: 35px; } .shelf:after { content: ""; background: #686868; height: 5px; width: 172px; position: absolute; top: 10px; left: 15px; right: 0; margin: 0 -20px; } .shelf:nth-child(2) { top: 70px; } .shelf:nth-child(3) { top: 130px; } .shelf:nth-child(4) { top: 170px; } .shelf:nth-child(5) { top: 210px; } .shelf:nth-child(6) { top: 250px; } .shelf:nth-child(7) { top: 290px; } .shelf:nth-child(8) { top: 330px; } .shelf:nth-child(9) { top: 370px; } </style> </head> <body translate="no"> <h1>The Quarantine Fridge</h1> <div class="fridge"> <div class="shelf"></div> <div class="shelf"></div> <div class="shelf"></div> <div class="shelf"></div> <div .........完整代码请登录后点击上方下载按钮下载查看
网友评论0