<div class="phone">
<div class="box"></div>
<div class="volume"></div>
<div class="power"></div>
<div class="camera"></div>
<div class="receiver">
<div></div>
</div>
</div>
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ... </head>
<body>
</body>
body {
height: 100vh;
width: 100%;
background: #d4ebf1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.phone {
--container-size: 0.05em;
font-size: var(--container-size);
position: relative;
width: 400em;
height: 800em;
border: 20em solid #000;
border-radius: 60em;
}
.phone:before {
content: "";
position: absolute;
width: 421em;
height: 815em;
box-shadow: 0 0 24em #fff;
border-radius: 45em;
left: -10em;
top: -8em;
}
.phone:after {
content: "";
position: absolute;
width: 421em;
height: 815em;
box-shadow: 0em 0em 24em #fff;
border-radius: 48em;
left: -10em;
top: -8em;
background: #19191d;
}
.box {
position: absolute;
border: #000000 1em solid;
width: 423em;
height: 817em;
left: -12em;
top: -10em;
z-index: 9;
border-radius: 50em;
box-shadow: #2e2c2c 0 0 14em;
}
.box:before {
content: "";
position: absolute;
width: 410em;
height: 789em;
border-radius: 50em;
top: 10em;
left: 6em;
z-index: -1;
background-size: 100%;
background-position: bottom;
background-image: linear-gradient(45deg, #46a7c0 50%, #185c92 50%, #185c92 100%);
}
.volume {
width: 9em;
height: 100em;
border: #000 1em solid;
background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
position: absolute;
right: -25em;
top: 125em;
z-index: -1;
border-radius: 20em;
}
.power {
width: 9em;
height: 46em;
border: #000 1em solid;
background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);
position: absolute;
right: -25em;
top: 260em;
z-index: -1;
border-radius: 20em;
}
.camera {
position: absolute;
width: 22em;
height: 22em;
background: #19191d;
border-radius: 100%;
top: 10em;
left: 20em;
z-index: 9;
}
.receiver {
position: absolute;
top: -13em;
left: 50%;
margin-left: -50em;
background: #000000;
border: #484848 1em solid;
width: 100em;
height: 8em;
z-index: 9;
border-radius: 20em;
}
.receiver div {
width: 100em;
height: 8em;
}
.receiver div:after {
content: "";
display: block;
width: 95%;
height: 83%;
top: 1em;
left: 3em;
position: absolute;
background-repeat: no-repeat;
background-image: repeating-linear-gradient(to right, #434242, #000000 1em, rgba(255, 255, 255, 0) 1em, rgba(255, 255, 255, 0) 3em), repeating-linear-gradient(to right, #434242, #19191d 1em, rgba(255, 255, 255, 0) 1em, rgba(255, 255, 255, 0) 3em);
background-size: 100% 50%;
background-position: 0 0, 2em 4em;
transform: skew(-25deg);
}
function initContainerSize() {
// 取窗口短边与1000之比
const p = Math.min(window.innerWidth / 500, window.innerHeight / 1000);
const el = document.querySelector(".phone");
el.style.setProperty("--container-size", p + "px");
}
initContainerSize();
window.addEventListener('resize', initContainerSize);