CSS
语言:
CSSSCSS
确定
*,
*:before,
*:after {
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #132133;
background: -webkit-radial-gradient(center circle, #132133 10%, rgba(7, 33, 39, 0.93) 85%);
background: radial-gradient(circle at center, #132133 10%, rgba(7, 33, 39, 0.93) 85%);
}
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.battery {
position: relative;
display: inline-block;
height: 100px;
width: 300px;
padding: 10px;
background: rgba(194, 254, 225, 0.88);
border: 7px solid transparent;
border-radius: 7px;
box-shadow: inset 0 0 22px -5px rgba(194, 254, 225, 0.58), 0 0 22px -5px rgba(194, 254, 225, 0.58);
}
.battery:before {
content: "";
position: absolute;
background-color: #132133;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
box-shadow: inset 0 0 22px -5px rgba(194, 254, 225, 0.58);
}
.battery:after {
content: "";
position: absolute;
top: calc(50% - 20px);
right: -27px;
height: 40px;
width: 20px;
border-radius: 0 7px 7px 0;
background-color: rgba(194, 254, 225, 0.88);
box-shadow: 0 0 22px -5px rgba(194, 254, 225, 0.68);
}
.power {
background-color: white;
display: block;
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
border-radius: 5px;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
background: rgba(194, 254, 225, 0.88);
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
transition: -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95);
transition: transform 1s cubic-bezier(0, 0, 0.28, 0.95), -webkit-transform 1s cubic-bezier(0, 0, 0.28, 0.95);
}