FORK ME

console 命令行工具 X clear

                    
>
console
<div class="girls-container">
  <h1> 飞天小女警 </h1>
<div class="girl-wrapper girl-buttercup">
   <div class="girl-pony-tail-left"></div>
     <div class="girl-pony-tail-right"></div>
  <div class="girl-head">
    <div class="girl-hair"></div>
    <div class="girl-eye-left"></div>
    <div class="girl-eye-right"></div>
    <div class="girl-mouth"></div>
  </div>
  <div class="girl-body">
    <div class="girl-body-stripe"></div>
    <div class="girl-body-legs"></div>
  </div>
</div>
<label for="bring-blossom-btn">Bring Blossom back!</label>
<input type="checkbox" id="bring-blossom-btn" />
<div class="girl-wrapper girl-blossom">
  <div class="girl-back-hair"></div>
     <div class="girl-pony-tail-left"></div>
     <div class="girl-pony-tail-right"></div>
  <div class="girl-head">
    <div class="girl-hair"></div>
    <div class="girl-eye-left"></div>
    <div class="girl-eye-right"></div>
    <div class="girl-mouth"></div>
  </div>
    <div class="girl-body">
      <div class="girl-body-stripe"></div>
      <div class="girl-body-legs"></div>
  </div>
</div>

<div class="girl-wrapper girl-bubbles">
   <div class="girl-pony-tail-left"></div>
     <div class="girl-pony-tail-right"></div>
  <div class="girl-head">
    <div class="girl-hair"></div>
    <div class="girl-eye-left"></div>
    <div class="girl-eye-right"></div>
    <div class="girl-mouth"></div>
  </div>
    <div class="girl-body">
      <div class="girl-body-stripe"></div>
      <div class="girl-body-legs"></div>
  </div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Faster+One');

@-webkit-keyframes girl-fly {
        100% { -webkit-transform: translateY(-150vh); transform: translateY(-150vh); }
    }

@keyframes girl-fly {
        100% { -webkit-transform: translateY(-150vh); transform: translateY(-150vh); }
    }

@-webkit-keyframes mouth-open {
    100% {
    width: 40px;
    height: 29px;
    border: solid 5px black;
    position: absolute;
    bottom: 20px;
    left: calc(50% - 20px);
    border-radius: 50% 50% 50% 50% / 1% 1% 100% 100%;
    border-color: white black black black;
    background: brown;
  }
}

@keyframes mouth-open {
    100% {
    width: 40px;
    height: 29px;
    border: solid 5px black;
    position: absolute;
    bottom: 20px;
    left: calc(50% - 20px);
    border-radius: 50% 50% 50% 50% / 1% 1% 100% 100%;
    border-color: white black black black;
    background: brown;
  }
}
 @-webkit-keyframes mouth-drop {
  100% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
  }
}
 @keyframes mouth-drop {
  100% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
  }
} 
@-webkit-keyframes arm-turn {
  100% {
    left: 100%;
    top: 85px;
    width: 105px;
    height: 45px;
    border-radius: 20% 0% 0% 20% / 50%;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
} 
@keyframes arm-turn {
  100% {
    left: 100%;
    top: 85px;
    width: 105px;
    height: 45px;
    border-radius: 20% 0% 0% 20% / 50%;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

@-webkit-keyframes blossom-back {
  0% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh);}
  100% { -webkit-transform: translateY(0px); transform: translateY(0px);}
}

@keyframes blossom-back {
  0% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh);}
  100% { -webkit-transform: translateY(0px); transform: translateY(0px);}
}

@-webkit-keyframes btn-show {
  0% {opacity: 0; }
  100% {opacity: 1; }
}

@keyframes btn-show {
  0% {opacity: 0; }
  100% {opacity: 1; }
}

h1{
  color:#FFF;
}

.girl-blossom .girl-mouth {
    -webkit-animation: mouth-open 0.1s 0.5s forwards linear;
            animation: mouth-open 0.1s 0.5s forwards linear;
}
.girl-blossom .girl-body:after {
  -webkit-animation: arm-turn 0.1s 1s ease forwards;
          animation: arm-turn 0.1s 1s ease forwards;
}
.girl-blossom {
   -webkit-animation: girl-fly 2s 1.5s forwards linear;
           animation: girl-fly 2s 1.5s forwards linear;
}

.girl-buttercup .girl-mouth {
  -webkit-animation: mouth-drop 0.2s 3.5s forwards ease;
          animation: mouth-drop 0.2s 3.5s forwards ease;
}
#bring-blossom-btn:checked + .girl-blossom { 
	-webkit-animation: blossom-back 4s ease-in-out forwards;
}

label[for="bring-blossom-btn"] { 
    -webkit-animation: btn-show 1s 4s forwards ease;
            animation: btn-show 1s 4s forwards ease;
}

/* BUTTON  */
input {
  visibility: hidden;
}
label[for="bring-blossom-btn"] { 
    color: white;
    text-align: center;
    cursor: pointer;
    position: absolute;
    left: calc(50% - 25px);
    display: inline-block;
    padding: 10px 0;
    width: 90px;
    border-radius: 50%;
    border: 4px solid white;
    background: black;
    box-shadow: 3px 6px 9px 1px black;
    opacity: 0;
    bottom: 20%;
}

* {
  box-sizing: border-box;
}
body {
  background: #333;

}
body h1 {
  font-family: 'Faster One', cursive;
  text-align: center;
  font-size: 50px;
  word-spacing: 25px;
}

.girls-container {
  display: block;
  margin: 3% auto;
  width: 1000px;
    border:1px solid transparent;
  text-align: center;
  position: relative;
}
.girl-wrapper {
  display: inline-block;
  margin: 10% 1% 10% 3%;
  position: relative;
  width: 30%;
  max-width: 230px;
}

.girl-back-light {
    position: absolute;
    width: 100%;
    height: 1000vh;
    background: #f5a398;
    z-index: -2;
    top: 100px;
}
.girl-head {
  -webkit-transform: scale(1);
  width: 100%;
  border: 7px solid black;
  border-radius: 50%;
  background: #fddcc9;
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 80.5%;
}
.girl-body {
 position: absolute;
  z-index: -1;
  bottom: -100px;
  left: calc(50% - 50px);
  -webkit-transform: scaleY(1.3) perspective(5px)
 rotateX(2deg);
          transform: scaleY(1.3) perspective(5px)
 rotateX(2deg);
-webkit-transform-origin: bottom;
        transform-origin: bottom;
  width: 100px;
  height: 250px;
  background: #46b82f;
  border: 7px solid black;
}

.girl-body:before,
.girl-body:after{
    content: "";
    position: absolute;
    width: 40px;
    height: 100px;
    background: #fddcc9;
    top: 69px;
    right: 100%;
    border-radius: 100% 0 0 100% / 50%;
    border: 7px solid black;
    z-index: 31;
}

.girl-body:after {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
  left: 100%;
}

.girl-body .girl-body-legs {
    position: absolute;
    bottom: -30px;
    width: 50px;
    background: white;
    border: 5px solid black;
    height: 27px;
    left: 20px;
}
.girl-body .girl-body-legs:before {
  content: "";
    width: 4px;
    height: 100%;
    background: black;
    position: absolute;
    left: calc(50% - 2px);
}
.girl-blossom .girl-body {
	background: #ec6b6f;
}
.girl-bubbles .girl-body {
	background: #38abe9;
}


.girl-body-stripe {
    width: 100%;
    height: 50px;
    background: black;
    position: absolute;
    top: 60%;
}
.girl-blossom .girl-back-hair {
    position: absolute;
    width: 160px;
    height: 140px;
    background: #f1a931;
    bottom: -86px;
    left: 34px;
    z-index: -1;
    -webkit-transform: scaleY(1.3) perspective(5px) rotateX(2deg);
            transform: scaleY(1.3) perspective(5px) rotateX(2deg);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    border: 5px solid;
    border-radius: 1px;
}

.girl-blossom .girl-back-hair:before,
.girl-blossom .girl-back-hair:after {
    content: "";
    position: absolute;
    bottom: -5px;
    background: #f1a931;
    width: 15px;
    height: 19px;
    border-radius: 0 0 0px 40px;
    z-index: -3;
    border: 4px solid;
    border-right: 0;
}
.girl-blossom .girl-back-hair:before {
    left: -21px;
}
.girl-blossom .girl-back-hair:after {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
    right: -21px;
}
.girl-blossom .girl-hair {
   position: absolute;
   top: -120px;
   left: -10px;
   width: 100%;
   z-index: 2;
    width: 0;
    height: 0;
    border-bottom: 120px solid transparent;
    border-top: 120px solid #f1a931; 
    border-left: 120px solid #f1a931;
    border-right: 120px solid #f1a931;
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    border-bottom-left-radius: 120px;
    border-bottom-right-radius: 120px;
}

.girl-eye-left, .girl-eye-right {
  background: white;
  width: 13%;
  height: 15%;
  border-radius: 50%;
  position: absolute;
  top: 30%;
}
.girl-eye-left {
    left: 23.5%;
    box-shadow: 
    -3px 10px 1px 22px black,
    -11px 12px 1px 30px #ec6b6f,
    -16px 15px 1px 32px white,
    -16px 14px 1px 34px black;
}
.girl-eye-right {
  right: 23.5%;
    box-shadow: 
    3px 10px 1px 22px black,
    11px 12px 1px 30px #ec6b6f,
    16px 15px 1px 32px white,
    16px 14px 1px 34px black;
}

.girl-eye-left:hover,
.girl-eye-right:hover {
      box-shadow: 3px 10px 1px 22px #fddcc9, 11px 12px 1px 30px #fddcc9, 16px 15px 1px 32px #fddcc9, 16px 14px 1px 34px black;
  background: #fddcc9;
}

.girl-mouth {
    width: 40px;
    height: 25px;
    border: solid 4px black;
    position: absolute;
    bottom: 25px;
    left: calc(50% - 20px);
    border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
    border-color: transparent black black black;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.girl-mouth:before {
    content: "";
    width: 32px;
    border: 7px solid #fddcc9;
    height: 41px;
    border-radius: 50%;
    position: absolute;
    top: -27px;
    left: -7px;
}

.girl-mouth:hover {
  width: 40px;
  height: 29px;
   border: solid 5px black;
   position: absolute;
   bottom: 20px;
   left: calc(50% - 20px);
  border-radius: 50% 50% 50% 50% / 1% 1% 100% 100%;
    border-color: white black black black;
  background: brown;
}

.girl-blossom .girl-pony-tail-left:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 20%;
    background: #d82e39;
    bottom: 10%;
    left: 85%;
    border: 2px solid black;
    border-radius: 35%;
}
.girl-blossom .girl-pony-tail-left,
.girl-blossom .girl-pony-tail-right {
    background: #d82e39;
    position: absolute;
    top: -41%;
    width: 26%;
    height: 50%;
    border-radius: 10% 100% 0 50%;
    border: 4px solid black;
}
.girl-blossom .girl-pony-tail-left {
     left: 22%;
}

.girl-blossom .girl-pony-tail-right {
     right: 22%;
     -webkit-transform: scaleX(-1);
             transform: scaleX(-1);
}


/* Yellow hair girl */
.girl-bubbles {
    left: -40px;
    z-index: -1;
}

.girl-bubbles .girl-eye-left {
      box-shadow: 
    -3px 10px 1px 22px black,
    -11px 12px 1px 30px #38abe9,
    -16px 15px 1px 32px white,
    -16px 14px 1px 34px black;
}
.girl-bubbles .girl-eye-right {
      box-shadow: 
    3px 10px 1px 22px black,
    11px 12px 1px 30px #38abe9,
    16px 15px 1px 32px white,
    16px 14px 1px 34px black;
}

.girl-bubbles .girl-hair {
    width: 120px;
    height: 120px;
    background: #fded62;
    border-radius: 50%;
    position: absolute;
    left: 0%;
    right: 100%;
    top: -60px;
    border: 3px solid transparent;
    z-index: 2;
    border-bottom-color: black;
}

.girl-bubbles .girl-hair:after {
    content: "";
    position: absolute;
    width: 130px;
    height: 120px;
    background: #fded62;
    border-radius: 50%;
    right: 0;
    left: 68%;
    border: 3px solid transparent;
    border-bottom-color: black;
    top: -10px;
}
.girl-bubbles .girl-pony-tail-left,
.girl-bubbles .girl-pony-tail-right {
    position: absolute;
    right: -40px;
    background: #fded62;
    width: 80px;
    height: 60px;
    border-radius: 10px 200px 0 200px;
    border: 4px solid black;
    top: 25px;
}
.girl-bubbles .girl-pony-tail-left {
  left: -40px;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}


/* Green girl */
.girl-buttercup {
  left: 6%;
}
.girl-buttercup .girl-mouth {
  width: 40px;
  height: 29px;
   border: solid 5px black;
   position: absolute;
   bottom: 20px;
   left: calc(50% - 20px);
  border-radius: 50% 50% 50% 50% / 1% 1% 100% 100%;
    border-color: white black black black;
    background: brown;
}


.girl-buttercup .girl-eye-left {
      box-shadow: 
    -3px 10px 1px 22px black,
    -11px 12px 1px 30px #46b82f,
    -16px 15px 1px 32px white,
    -16px 14px 1px 34px black;
}
.girl-buttercup .girl-eye-right {
      box-shadow: 
    3px 10px 1px 22px black,
    11px 12px 1px 30px #46b82f,
    16px 15px 1px 32px white,
    16px 14px 1px 34px black;
}

.girl-buttercup .girl-hair {
  width: 100%;
  height: 0;
  padding-bottom: 25%;
  background: black;
  z-index: 2;
  position: absolute
}

.girl-buttercup .girl-hair:before {
  content: "";
  position: absolute;
  left: calc(50% - 20px);
  top: 15px;
  width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 40px solid #fddcc9;
}
.girl-buttercup .girl-pony-tail-left,
.girl-buttercup .girl-pony-tail-right {
    position: absolute;
    right: -15px;
    top: 30%;
    background: black;
    width: 35%;
    height: 30%;
    border-radius: 0 0 80px 80px;
}
.girl-buttercup .girl-pony-tail-left {
  left: -15px;
}