SOURCE

console 命令行工具 X clear

                    
>
console
<div class="constellation stars">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>
<div class="earth">
  <div class="sand snd-1">
    <div class="cam cam-1"></div>
    <div class="cam cam-2"></div>
    <div class="cam cam-3"></div>
    <div class="cam cam-4"></div>
    <div class="cam cam-5"></div>
    <div class="cam cam-6"></div>
  </div>
  <div class="sand snd-2">
    <div class="cam cam-11"></div>
    <div class="cam cam-12"></div>
    <div class="cam cam-13"></div>
  </div>
  <div class="cloud cld-1">
    <div class="cam cam-1"></div>
    <div class="cam cam-2"></div>
    <div class="cam cam-3"></div>
    <div class="cam cam-4"></div>
    <div class="cam cam-5"></div>
    <div class="cam cam-6"></div>
    <div class="cam cam-7"></div>
    <div class="cam cam-8"></div>
    <div class="cam cam-9"></div>
    <div class="cam cam-10"></div>
  </div>
  <div class="cloud cld-2">
    <div class="cam cam-11"></div>
    <div class="cam cam-12"></div>
    <div class="cam cam-13"></div>
  </div>
</div>
<div class="rocket"></div>
<h1 class="earthday"><span>#</span><span>e</span><span>a</span><span>r</span><span>t</span><span>h</span><span>d</span><span>a</span><span>y</span><small><span>2</span><span>2</span><span>.</span><span>0</span><span>4</span></small></h1>
@import url(https://fonts.googleapis.com/css?family=Anton);

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

body {
    background: #100523;
}

.earthday {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 320px;
    bottom: 0px;
    width: 520px;
    text-align: center;
    height: 75px;
    font-size: 50px;
    font-family: 'Anton', sans-serif;
    color: #A0D468;
    text-shadow:
    1px 1px rgba(46, 76, 13, 1),
    2px 2px rgba(46, 76, 13, .7),
    3px 3px rgba(46, 76, 13, .6),
    4px 4px rgba(46, 76, 13, .5),
    5px 5px rgba(46, 76, 13, .4),
    6px 6px rgba(46, 76, 13, .3),
    7px 7px rgba(46, 76, 13, .2),
    8px 8px rgba(46, 76, 13, .1),
    9px 9px rgba(46, 76, 13, .09),
    10px 10px rgba(46, 76, 13, .08),
    11px 11px rgba(46, 76, 13, .07),
    12px 12px rgba(46, 76, 13, .06),
    13px 13px rgba(46, 76, 13, .05),
    14px 14px rgba(46, 76, 13, .04),
    15px 15px rgba(46, 76, 13, .03),
    16px 16px rgba(46, 76, 13, .02),
    17px 17px rgba(46, 76, 13, .01);
    text-transform: uppercase;
}

.earthday small {
    text-align: center;
    width: 100%;
    display: table;
    margin-top: -20px;
}

.earthday span { opacity: 0; font-size: 0px; }

.earthday span:nth-child(1) { animation: opacity1 .5s ease-in-out 1s forwards }
.earthday span:nth-child(2) { animation: opacity1 .5s ease-in-out 1.1s forwards }
.earthday span:nth-child(3) { animation: opacity1 .5s ease-in-out 1.2s forwards }
.earthday span:nth-child(4) { animation: opacity1 .5s ease-in-out 1.3s forwards }
.earthday span:nth-child(5) { animation: opacity1 .5s ease-in-out 1.4s forwards }
.earthday span:nth-child(6) { animation: opacity1 .5s ease-in-out 1.5s forwards }
.earthday span:nth-child(7) { animation: opacity1 .5s ease-in-out 1.6s forwards }
.earthday span:nth-child(8) { animation: opacity1 .5s ease-in-out 1.7s forwards }
.earthday span:nth-child(9) { animation: opacity1 .5s ease-in-out 1.8s forwards }
.earthday span:nth-child(10) { animation: opacity1 .5s ease-in-out 1.9s forwards }
.earthday span:nth-child(11) { animation: opacity1 .5s ease-in-out 2s forwards }
.earthday span:nth-child(12) { animation: opacity1 .5s ease-in-out 2.1s forwards }
.earthday span:nth-child(13) { animation: opacity1 .5s ease-in-out 2.2s forwards }
.earthday span:nth-child(14) { animation: opacity1 .5s ease-in-out 2.3s forwards }

.earthday small span:nth-child(1) { animation: opacity2 .5s ease-in-out 1s forwards }
.earthday small span:nth-child(2) { animation: opacity2 .5s ease-in-out 1.1s forwards }
.earthday small span:nth-child(3) { animation: opacity2 .5s ease-in-out 1.2s forwards }
.earthday small span:nth-child(4) { animation: opacity2 .5s ease-in-out 1.3s forwards }
.earthday small span:nth-child(5) { animation: opacity2 .5s ease-in-out 1.4s forwards }

.rocket {
    width: 240px;
    height: 240px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 50%;
    margin: auto;
    animation: rotate 10s linear infinite;
}

.rocket:after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px / 15px 0;
    background-color: #fff;
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(45deg);
}

.rocket:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 10px solid #fff;
    border-bottom: 6px solid transparent;
    position: absolute;
    left: -6px;
    right: 0;
    margin: auto;
    top: -6px;
}

.earth {
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #4fc1e9;
    overflow: hidden;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: showEarth 1.5s cubic-bezier(0.84, 0.04, 0.19, 1.02) forwards;
}

/* cloud */

.cloud {
  position: absolute;
  height: 300px;
}

.cloud.cld-1 {
  animation: cloud1 12s linear infinite;
  width: 650px;
  left: -650px;
}

.cloud.cld-2 {
  animation: cloud2 12 linear 2.2s infinite;
  width: 300px;
  left: -950px;
}

.cloud .cam {
  position: absolute;
  background-color: #ffffff;
}

.cloud .cam-1 {
  width: 100px;
  height: 40px;
  border-radius: 20px;
  top: 20px;
  left: 100px;
}

.cloud .cam-2 {
  width: 200px;
  height: 20px;
  border-radius: 10px;
  top: 70px;
  left: 250px;
}

.cloud .cam-3 {
  width: 150px;
  height: 50px;
  border-radius: 25px;
  top: 120px;
  left: 0;
}

.cloud .cam-4 {
  width: 120px;
  height: 20px;
  border-radius: 10px;
  top: 180px;
  left: 230px;
}

.cloud .cam-5 {
  width: 80px;
  height: 60px;
  border-radius: 30px;
  top: 220px;
  left: 80px;
}

.cloud .cam-6 {
  width: 70px;
  height: 10px;
  border-radius: 5px;
  top: 33px;
  left: 400px;
}

.cloud .cam-7 {
  width: 190px;
  height: 40px;
  border-radius: 20px;
  top: 110px;
  left: 460px;
}

.cloud .cam-8 {
  width: 120px;
  height: 40px;
  border-radius: 20px;
  top: 90px;
  left: 510px;
}

.cloud .cam-9 {
  width: 70px;
  height: 10px;
  border-radius: 5px;
  top: 240px;
  left: 560px;
}

.cloud .cam-10 {
  width: 110px;
  height: 40px;
  border-radius: 30px;
  top: 230px;
  left: 380px;
}

.cloud .cam-11 {
    width: 150px;
    height: 50px;
    border-radius: 25px;
    top: 180px;
    left: 20px;
}

.cloud .cam-12 {
    width: 120px;
    height: 20px;
    border-radius: 10px;
    top: 110px;
    left: 170px;
}

.cloud .cam-13 {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    top: 20px;
    left: 100px;
}

@keyframes cloud1 {
  0%{
    left: -650px;
  }
  100%{
    left: 300px;
  }
}

@keyframes cloud2 {
  0%{
    left: -950px;
  }
  100%{
    left: 300px;
  }
}

/*sand*/

.sand {
  position: absolute;
  height: 200px;
}

.sand.snd-1 {
  animation: sand1 8s linear infinite;
  width: 650px;
  left: -650px;
}

.sand.snd-2 {
  animation: sand2 8s linear 2.2s infinite;
  width: 300px;
  left: -950px;
}

.sand .cam {
  position: absolute;
  background-color: #a0d468;
}

.sand .cam-1 {
    width: 220px;
    height: 80px;
    border-radius: 40px;
    top: 10px;
    left: 70px;
}

.sand .cam-2 {
    width: 200px;
    height: 50px;
    border-radius: 25px;
    top: 100px;
    left: 430px;
}

.sand .cam-3 {
    width: 240px;
    height: 50px;
    border-radius: 25px;
    top: 120px;
    left: 0;
}

.sand .cam-4 {
    width: 160px;
    height: 50px;
    border-radius: 25px;
    top: 210px;
    left: 330px;
}

.sand .cam-5 {
    width: 80px;
    height: 60px;
    border-radius: 30px;
    top: 200px;
    left: 160px;
}

.sand .cam-6 {
    width: 110px;
    height: 20px;
    border-radius: 10px;
    top: 40px;
    left: 360px;
}

.sand .cam-7 {
  width: 190px;
  height: 40px;
  border-radius: 20px;
  top: 110px;
  left: 460px;
}

.sand .cam-8 {
  width: 120px;
  height: 40px;
  border-radius: 20px;
  top: 90px;
  left: 510px;
}

.sand .cam-9 {
  width: 70px;
  height: 10px;
  border-radius: 5px;
  top: 240px;
  left: 560px;
}

.sand .cam-10 {
  width: 110px;
  height: 40px;
  border-radius: 30px;
  top: 230px;
  left: 380px;
}

.sand .cam-11 {
    width: 150px;
    height: 50px;
    border-radius: 25px;
    top: 180px;
    left: 20px;
}

.sand .cam-12 {
    width: 120px;
    height: 20px;
    border-radius: 10px;
    top: 110px;
    left: 170px;
}

.sand .cam-13 {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    top: 20px;
    left: 100px;
}

@keyframes sand1 {
    0% { left: -650px; }
    100% { left: 300px; }
}

@keyframes sand2 {
    0% { left: -950px; }
    100% { left: 300px; }
}

/* animations initials */

@keyframes showEarth {
    0% { width: 0; height: 0; box-shadow: none; }
    70%, 100% { box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .02), 0 0 0 120px rgba(255, 255, 255, .01); }
    100% { width: 200px; height: 200px; }
}

/* animations others */

@keyframes rotate {
    to { transform: rotate(360deg); }
}

@keyframes opacity1 {
    0% { opacity: 0; font-size: 0px; }
    100% { opacity: 1; font-size: 50px; }
}

@keyframes opacity2 {
    0% { opacity: 0; font-size: 0px; }
    100% { opacity: 1; font-size: 30px; }
}

/* constallations */

.constellation {
  width: 100%;
  height: 100%;
  position: absolute;
}

.star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
}

@for $i from 1 through 401 {
  .star:nth-child(#{$i}) { 
    top: random(2000) + px;
    left: random(2000) + px;
    $sizeStar: random(4) + px;
    width: $sizeStar;
    height: $sizeStar;
    animation: blink $i * .1s  infinite;
  }
}