console
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 130" class="lamp">
<g>
<circle class="bulb" style="" cx="30" cy="109.3" r="10.7"/>
<line style="fill:none;stroke:#D7D5AF;stroke-width:0.263;stroke-linecap:round;stroke-miterlimit:10;" x1="28.1" y1="108.1" x2="27.4" y2="113.4"/>
<line style="fill:none;stroke:#D7D5AF;stroke-width:0.263;stroke-linecap:round;stroke-miterlimit:10;" x1="32" y1="108.1" x2="32.6" y2="113.4"/>
<polyline style="fill:none;stroke:#D7D5AF;stroke-width:0.263;stroke-linecap:round;stroke-miterlimit:10;" points="27.8,113.5 28.3,112.8 28.8,113.5 29.6,112.8 30,113.5 30.7,112.9 31.2,113.5 31.8,112.8 32.3,113.5"/>
</g>
<rect x="20.7" y="66.7" style="fill:#2D2D2F;" width="18.6" height="15.6"/>
<rect x="28.5" y="0" style="fill:#2D2D2F;" width="3" height="66.7"/>
<path style="fill:#2D2D2F;" d="M30,80.3c-16.6,0-30,13.4-30,30h60C60,93.8,46.6,80.3,30,80.3z"/>
<path style="fill:#2D2D2F;" d="M30,80.3c-16.6,0-30,13.4-30,30h60C60,93.8,46.6,80.3,30,80.3z"/>
</svg>
body {
background-color: #4e4e4e;
margin: 0;
text-align: center;
font-size: 10px;
}
.lamp {
width: 10em;
display: inline-block;
transform-origin: top center;
transform: rotate(45deg);
animation: lamp 3s forwards;
}
.bulb {
fill: #FBF8CA;
fill-opacity: 0.1;
animation: bulb 0.3s 0.3s 5 cubic-bezier(0.26, 1.17, 0.89, -0.74) alternate forwards;
}
.switch {
transition: transform .3s;
}
.switch:active {
transform: translateY(5px);
}
@keyframes bulb {
to {
fill-opacity: 1;
fill: #FBF8CA;
}
}
@keyframes lamp {
5% {
transform: rotate(-45deg);
}
10% {
transform: rotate(35deg);
}
15% {
transform: rotate(-35deg);
}
25% {
transform: rotate(15deg);
}
40% {
transform: rotate(-15deg);
}
65% {
transform: rotate(3deg);
}
85% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}