Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
CSS
is
Awesome
css
* { box-sizing: border-box; } body { align-items: center; background-color: #f9bf3b; display: flex; justify-content: center; min-height: 100vh; } :root { --height: 300; --width: 200; --depth: 150; --drawerSize: calc((var(--height) / 3) - 10); --drawerHole: calc((var(--height) - ((10 * 4) + (10 + 30))) / 3); } .chest { height: calc(var(--height) * 1px); -webkit-transform: rotateX(-30deg) rotateY(40deg); transform: rotateX(-30deg) rotateY(40deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: calc(var(--width) * 1px); } .chest__panel { height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; } .chest__panel:after { content: ''; display: block; height: 100%; width: 100%; } .chest__panel--front { -webkit-transform: translate3d(0, 0, calc(var(--depth) / 2 * 1px)); transform: translate3d(0, 0, calc(var(--depth) / 2 * 1px)); } .chest__panel--front:after { background: #5b5b5b; content: ''; height: 4px; position: absolute; top: -2px; width: 100%; } .chest__panel--front-frame { border: 10px solid #5b5b5b; border-bottom-width: 30px; border-top-width: 10px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .chest__panel--front-frame:before { background: #5b5b5b; content: ''; height: 20px; left: 0; position: absolute; top: calc(var(--drawerHole) * 1px); width: 100%; } .chest__panel--front-frame:after { background: #5b5b5b; content: ''; height: 20px; left: 0; position: absolute; top: calc(var(--drawerHole) * 2px + 20px); width: 100%; } .chest__panel--back { background: #5b5b5b; -webkit-transform: translate3d(0, 0, calc(var(--depth) / 2 * -1px)); transform: translate3d(0, 0, calc(var(--depth) / 2 * -1px)); } .chest__panel--back:after { background: #000; -webkit-transform: translate3d(0, 0, 1px); transform: translate3d(0, 0, 1px); } .chest__panel--top { background: #474747; bottom: 100%; height: calc(var(--depth) * 1px); left: 0; -webkit-transform: rotateX(90deg) translate3d(0, 50%, 1px); transform: rotateX(90deg) translate3d(0, 50%, 1px); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .chest__panel--top:after { background: #1a1a1a; -webkit-transform: translate3d(0, 0, -1px); transform: translate3d(0, 0, -1px); } .chest__panel--bottom { background: #474747; height: calc(var(--depth) * 1px); left: 0; top: 100%; -webkit-transform: translateY(-50%) rotateX(90deg); transform: translateY(-50%) rotateX(90deg); } .chest__panel--bottom:after { background: #0d0d0d; -webkit-transform: translate3d(0, 0, 1px); transform: translate3d(0, 0, 1px); } .chest__panel--right { background: #323232; right: 0; -webkit-transform: translate3d(0, 0, calc(var(--depth) / 2 * 1px)) rotateY(-90deg); transform: translate3d(0, 0, calc(var(--depth) / 2 * 1px)) rotateY(-90deg); -webkit-transform-origin: right center; transform-origin: right center; width: calc(var(--depth) * 1px); } .chest__panel--right:after { background: #1a1a1a; -webkit-transform: translate3d(0, 0, 1px); transform: translate3d(0, 0, 1px); } .chest__panel--left { width: calc(var(--depth) * 1px); left: 0; background: #323232; -webkit-transform-origin: left center; transform-origin: left center; -webkit-transform: translate3d(0, -1px, calc(var(--depth) / 2 * 1px)) rotateY(90deg); transform: translate3d(0, -1px, calc(var(--depth) / 2 * 1px)) rotateY(90deg); } .chest__panel--left:after { background: #1a1a1a; -webkit-transform: translate3d(0, 0, 1px); transform: translate3d(0, 0, 1px); } .chest-drawer { height: calc(var(--drawerSize) * 1px); left: 0; position: absolute; top: 0; transition: -webkit-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; } .chest-drawer--top, .chest-drawer--middle, .chest-drawer--bottom { -webkit-transform: translate3d(0, 0, calc(var(--depth) * 0.51px)); transform: translate3d(0, 0, calc(var(--depth) * 0.51px)); } .chest-drawer--top { top: 5px; z-index: 3; } .chest-drawer--middle { top: calc((var(--drawerSize) + 10) * 1px); z-index: 2; } .chest-drawer--bottom { top: calc((var(--drawerSize) * 2 + 15) * 1px); z-index: 1; } .chest-drawer details, .chest-drawer summary { background: #303030; cursor: pointer; height: 100%; left: 0; list-style: none; position: absolute; outline: 0; top: 0; transition: -webkit-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 100%; } .chest-drawer details:after, .chest-drawer summary:after { background: #adadad; content: ''; height: 5%; left: 50%; position: absolute; top: 10%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); width: 40%; } .chest-drawer details::-webkit-details-marker, .chest-drawer summary::-webkit-details-marker { display: none; } .chest-drawer details:hover:not([open]) { -webkit-transform: translate3d(0, 0, calc(var(--depth) * 0.05px)); transform: translate3d(0, 0, calc(var(--depth) * 0.05px)); } .chest-drawer details[open], .chest-drawer details[open] ~ .chest-drawer__structure { -webkit-transform: translate3d(0, 0, calc(var(--depth) * 0.9px)); transform: translate3d(0, 0, calc(var(--depth) * 0.9px)); } .chest-drawer__panel { height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; } .chest-drawer__panel--left { background: #e6e6e6; bottom: 0; height: calc(var(--drawerHole) * 0.65px); left: 10px; -webkit-transform: translate3d(0, -16px, -2px) rotateY(90deg); transform: translate3d(0, -16px, -2px) rotateY(90deg); -webkit-transform-origin: left; transform-origin: left; width: calc(var(--depth) * 1px); } .chest-drawer__panel--right { background: #e6e6e6; bottom: 0; height: calc(var(--drawerHole) * 0.65px); right: 10px; -webkit-transform: translate3d(0, -16px, -2px) rotateY(-90deg); transform: translate3d(0, -16px, -2px) rotateY(-90deg); -webkit-transform-origin: right; transform-origin: right; width: calc((var(--depth) - 3) * 1px); } .chest-drawer__panel--bottom { background: #fff; bottom: 18px; height: calc(var(--depth) * 1px); left: 10px; -webkit-transform: rotateX(90deg) translate3d(0, -2px, 0); transform: rotateX(90deg) translate3d(0, -2px, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; width: calc(100% - (2px * 10)); } .chest-drawer__panel--back { align-items: center; background: #d9d9d9; bottom: 16px; display: flex; font-family: 'Arial', sans-serif; font-size: calc(var(--drawerHole) * 0.35px); font-weight: bold; height: calc(var(--drawerHole) * 0.65px); justify-content: center; left: 10px; -webkit-transform: translate3d(0, 0, calc((var(--depth) - 2) * -1px)); transform: translate3d(0, 0, calc((var(--depth) - 2) * -1px)); width: calc(100% - (2px * 10)); } .chest-drawer__structure { height: 100%; left: 0; position: absolute; top: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: -webkit-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; width: 100%; } .chest-drawer--top .chest-drawer__panel--back { color: #e74c3c; } .chest-drawer--middle .chest-drawer__panel--back { color: #6bb9f0; } .chest-drawer--bottom .chest-drawer__panel--back { color: #00e640; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS抽屉-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号