CSS
语言:
CSSSCSS
确定
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html,
body {
background: linear-gradient(135deg, #ffd65e 0%, #febf04 100%);
}
#unit {
width: 350px;
height: 240px;
background: linear-gradient(135deg, #777266 0%, #2c2522 100%);
position: absolute;
left: 50%;
margin-left: -170px;
top: 50%;
margin-top: -120px;
border-radius: 5px;
border-top: 1px solid #898378;
box-shadow: inset 0px -4px 10px rgba(0, 0, 0, 0.2), 0px 10px 12px rgba(0, 0, 0, 0.6);
}
#frame {
width: 270px;
height: 220px;
background: linear-gradient(135deg, #d2cebf 0%, #655d4f 100%);
top: 8px;
left: 8px;
position: absolute;
border-radius: 15px;
box-shadow: inset 0px 0px 5px black;
border: 2px solid rgba(0, 0, 0, 0.6);
}
#panel {
position: absolute;
width: 53px;
height: 216px;
background: linear-gradient(135deg, #d2cebf 0%, #655d4f 100%);
right: 8px;
top: 12px;
border-radius: 2px;
}
#dial1 {
width: 38px;
height: 38px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
top: 10px;
left: 8px;
border-bottom: 2px solid #2c2522;
border-top: 2px solid #ada598;
position: absolute;
background: linear-gradient(135deg, #777266 0%, #2c2522 100%);
border-radius: 50px;
}
#dial2 {
width: 38px;
height: 38px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
top: 60px;
left: 8px;
border-bottom: 2px solid #2c2522;
border-top: 2px solid #ada598;
position: absolute;
background: linear-gradient(135deg, #777266 0%, #2c2522 100%);
border-radius: 50px;
}
#speaker {
width: 38px;
height: 88px;
box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.5);
top: 114px;
left: 8px;
border-bottom: 2px solid #2c2522;
border-top: 2px solid #ada598;
position: absolute;
background: linear-gradient(135deg, #d2cebf 0%, #655d4f 100%);
border-radius: 5px;
}
#screen {
width: 250px;
height: 200px;
position: absolute;
background: black;
border-radius: 10px;
border: 5px solid black;
top: 5px;
left: 5px;
}
canvas {
-webkit-filter: blur(2px);
filter: blur(1.5px);
border-radius: 10px;
position: absolute;
z-index: 1;
}