SOURCE

console 命令行工具 X clear

                    
>
console
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 130" class="lamp">
	<!-- bulb -->
  <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>
  <!-- /bulb -->
	<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"/>
<!--
  <g class="switch">
    <line style="fill:none;stroke:#2D2D2F;stroke-width:0.5;stroke-miterlimit:10;" x1="49" y1="100" x2="49" y2="118"/>
    <circle style="fill:none;stroke:#2D2D2F;stroke-width:0.5;stroke-miterlimit:10;" cx="49" cy="120" r="1.6"/>
  </g>
-->
</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);
  }
}