我的房间 - CSS还原
by EpicCoder88337 lines7.5 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的房间 - CSS还原</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #222;
font-family: sans-serif;
}
/* 房间主容器 */
.room {
position: relative;
width: 100vw;
height: 100vh;
max-width: 1200px;
max-height: 800px;
background: #f4f4f4;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* 地板 */
.floor {
position: absolute;
bottom: 0;
width: 100%;
height: 35%;
background: #e3e5e8;
background-image:
linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
background-size: 50px 50px;
transform: perspective(500px) rotateX(10deg);
transform-origin: bottom;
}
/* 左侧墙壁/背景 */
.wall {
position: absolute;
top: 0;
width: 100%;
height: 70%;
background: #fdfaf7;
z-index: 1;
}
/* 墙面水渍 */
.stain {
position: absolute;
bottom: 0;
right: 5%;
width: 150px;
height: 300px;
background: #cdaa7d;
opacity: 0.6;
border-radius: 50% 40% 20% 10% / 60% 50% 30% 20%;
filter: blur(8px);
z-index: 2;
}
/* 右侧窗帘 */
.curtain {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 100%;
background: #fff9fb;
border-left: 3px solid #f4b6c2;
box-shadow: -5px 0 15px rgba(0,0,0,0.05);
z-index: 3;
background-image: radial-gradient(#f4b6c2 2px, transparent 2px);
background-size: 20px 20px;
}
/* 空调 */
.ac {
position: absolute;
top: 5%;
left: 35%;
width: 220px;
height: 60px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
z-index: 4;
border-bottom: 3px solid #ddd;
}
.ac::after {
content: '';
position: absolute;
bottom: 10px;
left: 10px;
width: 200px;
height: 3px;
background: #ddd;
}
/* 书桌 */
.desk {
position: absolute;
bottom: 25%;
right: 15%;
width: 380px;
height: 180px;
background: #8b5a2b;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
z-index: 5;
}
.desk-drawer {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 100%;
background: #754a22;
border-radius: 0 0 5px 5px;
}
/* 电脑显示器 */
.monitor {
position: absolute;
top: -60px;
right: 20px;
width: 120px;
height: 80px;
background: #1a1a1a;
border-radius: 5px;
border: 3px solid #333;
z-index: 6;
}
.monitor-stand {
position: absolute;
top: 20px;
right: 70px;
width: 20px;
height: 30px;
background: #333;
z-index: 6;
}
/* 电脑主机 */
.pc-tower {
position: absolute;
bottom: 5px;
right: 20px;
width: 50px;
height: 70px;
background: #222;
border-radius: 3px;
z-index: 4;
}
/* 粉色椅子 */
.chair {
position: absolute;
bottom: 20%;
right: 35%;
width: 90px;
height: 90px;
background: #f4b6c2;
border-radius: 20px 20px 10px 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
z-index: 7;
}
.chair-leg {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 40px;
background: #fff;
}
.chair-base {
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 10px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 落地风扇 */
.fan {
position: absolute;
bottom: 28%;
left: 12%;
z-index: 8;
}
.fan-head {
width: 100px;
height: 100px;
background: radial-gradient(circle, #ddd 20%, #333 30%, #666 35%, #333 80%, #000 100%);
border-radius: 50%;
border: 4px solid #eee;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
position: relative;
}
.fan-head::after {
content: 'Midea';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8px;
color: white;
font-weight: bold;
}
.fan-pole {
width: 12px;
height: 120px;
background: #eee;
margin: 0 auto;
border: 1px solid #ccc;
}
.fan-base {
width: 80px;
height: 20px;
background: #eee;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* 床铺（前景） */
.bed {
position: absolute;
bottom: 0;
width: 100%;
height: 40%;
background: #9e5a38;
background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 2px, transparent 2px, transparent 4px);
z-index: 10;
border-top: 8px solid #d3d3d3;
border-radius: 10px 10px 0 0;
box-shadow: 0 -10px 20px rgba(0,0,0,0.1);
}
/* 垃圾桶 */
.trash-can {
position: absolute;
bottom: 22%;
right: 8%;
width: 50px;
height: 60px;
background: #8fa3ad;
border-radius: 5px 5px 10px 10px;
z-index: 5;
opacity: 0.8;
}
.trash-can::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 60px;
height: 10px;
background: #d3e0e6;
border-radius: 5px;
}
/* 地上的蓝色圈圈 */
.blue-ring {
position: absolute;
bottom: 25%;
left: 8%;
width: 60px;
height: 20px;
border: 4px solid #4a90e2;
border-radius: 50%;
z-index: 6;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="room">
<!-- 墙面和地板 -->
<div class="wall"></div>
<div class="stain"></div>
<div class="floor"></div>
<div class="curtain"></div>
<!-- 左上角空调 -->
<div class="ac"></div>
<!-- 书桌区域 -->
<div class="desk">
<div class="desk-drawer"></div>
</div>
<div class="monitor"></div>
<div class="monitor-stand"></div>
<div class="pc-tower"></div>
<!-- 粉色椅子 -->
<div class="chair">
<div class="chair-leg"></div>
<div class="chair-base"></div>
</div>
<!-- 落地风扇 -->
<div class="fan">
<div class="fan-head"></div>
<div class="fan-pole"></div>
<div class="fan-base"></div>
</div>
<!-- 地面物品 -->
<div class="blue-ring"></div>
<div class="trash-can"></div>
<!-- 前景床铺 -->
<div class="bed"></div>
</div>
</body>
</html>Game Source: 我的房间 - CSS还原
Creator: EpicCoder88
Libraries: none
Complexity: complex (337 lines, 7.5 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: css-epiccoder88" to link back to the original. Then publish at arcadelab.ai/publish.