CSS
语言:
CSSSCSS
确定
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,300,500);
body,
.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.phone:before,
.phone:after,
.screen:after {
display: block;
position: absolute;
content: "";
}
* {
margin: 0;
padding: 0;
border: 0;
}
body {
position: relative;
height: 100vh;
background: lightgray;
}
.wrapper {
width: 90vmin;
height: 90vmin;
background: url("https://drscdn.500px.org/photo/84448705/m%3D2048/9a72bfdf723fca8a09c52524f0bef804");
background-size: cover;
border-radius: 50%;
}
.phone {
position: relative;
border: solid white;
border-width: 9vmin 1.44vmin;
box-shadow: 0 0 0 72vmin lightgray;
border-radius: 4.8vmin;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
.phone:before,
.phone:after {
background: rgba(128, 128, 128, 0.2);
border-radius: 72vmin;
}
.phone:before {
width: 7.2vmin;
height: 7.2vmin;
top: 100.5%;
left: 16.61666vmin;
}
.phone:after {
width: 9vmin;
height: 1.44vmin;
top: -4.5vmin;
left: 16vmin;
}
.show-overlay .phone {
box-shadow: 0 0 0 72vmin rgba(211, 211, 211, 0.75);
}
.right .phone {
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
}
.bottom .phone {
-webkit-transform: rotate3d(0, 0, 1, 180deg);
transform: rotate3d(0, 0, 1, 180deg);
}
.left .phone {
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
}
.screen {
position: relative;
width: 40.5vmin;
height: 72vmin;
border-radius: 10px;
}
.screen:after {
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 5px solid white;
border-radius: 8px;
}
button {
display: inline-block;
font-family: Alegreya Sans, sans-serif;
position: fixed;
top: 10px;
font-size: 16px;
background: white;
border-radius: 200px;
padding: 6px 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button.rotate {
left: 10px;
}
button.toggle-overlay {
right: 10px;
}
button:hover {
background: black;
color: lightgray;
}
button:active {
opacity: 0.5;
}
button:focus {
outline: 0;
}