css实现炫酷带卡通动画移民表单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现炫酷带卡通动画移民表单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


<style>
/* ------------------------------------------------------------------------------------------------------

Name: Traverse through scenes
Description: Makes it incredibly easy to trigger scene changes using the checkbox *hack*
Instead of doing  input#index39:checked + input + div + div { props }

--------------------------------------------------------------------------------------------------------- */
input[type=radio] {
  display: none;
}

/* ----------------------------------

Checked not checked mixins

------------------------------------- */
/* ----------------------------------

Init the traverse

------------------------------------- */
input#index1:checked + input + input + input + input + input + div + div + div + div + div {
  transform: scale(1);
}

input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div {
  transform: scale(0);
}

input#index1:checked + input + input + input + input + input + div + div + div {
  background-position: -2200px 0;
}

input#index1:checked + input + input + input + input + input + div + div + div + div {
  background-position: -1000px 0;
}

input#index1:checked + input + input + input + input + input + div {
  right: 300px;
}

/* ----------------------------------

Animation chains

------------------------------------- */
input#index1:checked + input + input + input + input + input + div + div + div + div + div p {
  -webkit-animation: in 1s 1s forwards;
          animation: in 1s 1s forwards;
}

input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_small {
  -webkit-animation: scaleBack 0.3s 0.6s forwards;
          animation: scaleBack 0.3s 0.6s forwards;
  transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_to {
  -webkit-animation: scaleBack 0.3s 0.7s forwards;
          animation: scaleBack 0.3s 0.7s forwards;
  transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span {
  transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span:nth-of-type(1) {
  -webkit-animation: scaleBack 0.3s 0.5s forwards;
          animation: scaleBack 0.3s 0.5s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span:nth-of-type(2) {
  -webkit-animation: scaleBack 0.3s 0.3s forwards;
          animation: scaleBack 0.3s 0.3s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span:nth-of-type(3) {
  -webkit-animation: scaleBack 0.3s 0.4s forwards;
          animation: scaleBack 0.3s 0.4s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_large span:nth-of-type(4) {
  -webkit-animation: scaleBack 0.3s 0.2s forwards;
          animation: scaleBack 0.3s 0.2s forwards;
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start .intro_subheading {
  -webkit-animation: scaleBack 0.3s 0.1s forwards;
          animation: scaleBack 0.3s 0.1s forwards;
  transform: scale(1);
}
input#index1:not(:checked) + input + input + input + input + input + div + div + div + div + div.start label {
  -webkit-animation: scaleBack 0.3s 0s forwards;
          animation: scaleBack 0.3s 0s forwards;
  transform: scale(1);
}

input#index2:checked + input + input + input + input + div + div + div + div + div + div {
  transform: scale(1);
}

input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div {
  transform: scale(0);
}

input#index2:checked + input + input + input + input + div + div + div {
  background-position: -4400px 0;
}

input#index2:checked + input + input + input + input + div + div + div + div {
  background-position: -2000px 0;
}

input#index2:checked + input + input + input + input + div {
  right: 2200px;
}

/* ----------------------------------

Animation chains

------------------------------------- */
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_peeps img {
  -webkit-animation: slideUp 0.8s 2s forwards;
          animation: slideUp 0.8s 2s forwards;
  bottom: -400px;
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development {
  -webkit-animation: bob 3s 1.8s infinite;
          animation: bob 3s 1.8s infinite;
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__small {
  -webkit-animation: scale 1s 2s forwards;
          animation: scale 1s 2s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__mars img {
  -webkit-animation: scale 1s 2.1s forwards;
          animation: scale 1s 2.1s forwards;
  cursor: pointer;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(1) {
  -webkit-animation: scale 1s 2.06s forwards;
          animation: scale 1s 2.06s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(2) {
  -webkit-animation: scale 1s 2.12s forwards;
          animation: scale 1s 2.12s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(3) {
  -webkit-animation: scale 1s 2.18s forwards;
          animation: scale 1s 2.18s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(4) {
  -webkit-animation: scale 1s 2.24s forwards;
          animation: scale 1s 2.24s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(5) {
  -webkit-animation: scale 1s 2.3s forwards;
          animation: scale 1s 2.3s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(6) {
  -webkit-animation: scale 1s 2.36s forwards;
          animation: scale 1s 2.36s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(7) {
  -webkit-animation: scale 1s 2.42s forwards;
          animation: scale 1s 2.42s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(8) {
  -webkit-animation: scale 1s 2.48s forwards;
          animation: scale 1s 2.48s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(9) {
  -webkit-animation: scale 1s 2.54s forwards;
          animation: scale 1s 2.54s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(10) {
  -webkit-animation: scale 1s 2.6s forwards;
          animation: scale 1s 2.6s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(11) {
  -webkit-animation: scale 1s 2.66s forwards;
          animation: scale 1s 2.66s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(12) {
  -webkit-animation: scale 1s 2.72s forwards;
          animation: scale 1s 2.72s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(13) {
  -webkit-animation: scale 1s 2.78s forwards;
          animation: scale 1s 2.78s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(14) {
  -webkit-animation: scale 1s 2.84s forwards;
          animation: scale 1s 2.84s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(15) {
  -webkit-animation: scale 1s 2.9s forwards;
          animation: scale 1s 2.9s forwards;
  transform: scale(0);
}
input#index2:checked + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(16) {
  -webkit-animation: scale 1s 2.96s forwards;
          animation: scale 1s 2.96s forwards;
  transform: scale(0);
}

input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_peeps img {
  -webkit-animation: slideBack 0.5s 0s forwards;
          animation: slideBack 0.5s 0s forwards;
  bottom: 0;
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development {
  -webkit-animation: bob 3s 1.8s infinite;
          animation: bob 3s 1.8s infinite;
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__small {
  -webkit-animation: scaleBack 0.3s 0.1s forwards;
          animation: scaleBack 0.3s 0.1s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__mars img {
  -webkit-animation: scaleBack 0.3s 0.2s forwards;
          animation: scaleBack 0.3s 0.2s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(1) {
  -webkit-animation: scaleBack 0.3s 0.34s forwards;
          animation: scaleBack 0.3s 0.34s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(2) {
  -webkit-animation: scaleBack 0.3s 0.38s forwards;
          animation: scaleBack 0.3s 0.38s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(3) {
  -webkit-animation: scaleBack 0.3s 0.42s forwards;
          animation: scaleBack 0.3s 0.42s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(4) {
  -webkit-animation: scaleBack 0.3s 0.46s forwards;
          animation: scaleBack 0.3s 0.46s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(5) {
  -webkit-animation: scaleBack 0.3s 0.5s forwards;
          animation: scaleBack 0.3s 0.5s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(6) {
  -webkit-animation: scaleBack 0.3s 0.54s forwards;
          animation: scaleBack 0.3s 0.54s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(7) {
  -webkit-animation: scaleBack 0.3s 0.58s forwards;
          animation: scaleBack 0.3s 0.58s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(8) {
  -webkit-animation: scaleBack 0.3s 0.62s forwards;
          animation: scaleBack 0.3s 0.62s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(9) {
  -webkit-animation: scaleBack 0.3s 0.66s forwards;
          animation: scaleBack 0.3s 0.66s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(10) {
  -webkit-animation: scaleBack 0.3s 0.7s forwards;
          animation: scaleBack 0.3s 0.7s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(11) {
  -webkit-animation: scaleBack 0.3s 0.74s forwards;
          animation: scaleBack 0.3s 0.74s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(12) {
  -webkit-animation: scaleBack 0.3s 0.78s forwards;
          animation: scaleBack 0.3s 0.78s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(13) {
  -webkit-animation: scaleBack 0.3s 0.82s forwards;
          animation: scaleBack 0.3s 0.82s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(14) {
  -webkit-animation: scaleBack 0.3s 0.86s forwards;
          animation: scaleBack 0.3s 0.86s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(15) {
  -webkit-animation: scaleBack 0.3s 0.9s forwards;
          animation: scaleBack 0.3s 0.9s forwards;
  transform: scale(1);
}
input#index2:not(:checked) + input + input + input + input + div + div + div + div + div + div .intro_development__large span:nth-of-type(16) {
  -webkit-animation: scaleBack 0.3s 0.94s forwards;
          animation: scaleBack 0.3s 0.94s forwards;
  transform: scale(1);
}

input#index3:checked + input + input + input + div + div + div + div + div + div + div {
  transform: scale(1);
}

input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div {
  transform: scale(0);
}

input#index3:checked + input + input + input + div + div + div {
  background-position: -6600px 0;
}

input#index3:checked + input + input + input + div + div + div + div {
  background-position: -3000px 0;
}

input#index3:checked + input + input + input + div {
  right: 4100px;
}

/* ----------------------------------

Animation chains

------------------------------------- */
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(1) {
  -webkit-animation: scale 1s 2s forwards;
          animation: scale 1s 2s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(2) {
  -webkit-animation: scale 1s 2.1s forwards;
          animation: scale 1s 2.1s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(3) {
  -webkit-animation: scale 1s 2.2s forwards;
          animation: scale 1s 2.2s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__small {
  -webkit-animation: scale 1s 2.3s forwards;
          animation: scale 1s 2.3s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__select {
  -webkit-animation: scale 1s 2.4s forwards;
          animation: scale 1s 2.4s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(1) {
  -webkit-animation: scale 1s 2.06s forwards;
          animation: scale 1s 2.06s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(2) {
  -webkit-animation: scale 1s 2.12s forwards;
          animation: scale 1s 2.12s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(3) {
  -webkit-animation: scale 1s 2.18s forwards;
          animation: scale 1s 2.18s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(4) {
  -webkit-animation: scale 1s 2.24s forwards;
          animation: scale 1s 2.24s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(5) {
  -webkit-animation: scale 1s 2.3s forwards;
          animation: scale 1s 2.3s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(6) {
  -webkit-animation: scale 1s 2.36s forwards;
          animation: scale 1s 2.36s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(7) {
  -webkit-animation: scale 1s 2.42s forwards;
          animation: scale 1s 2.42s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(8) {
  -webkit-animation: scale 1s 2.48s forwards;
          animation: scale 1s 2.48s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(9) {
  -webkit-animation: scale 1s 2.54s forwards;
          animation: scale 1s 2.54s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(10) {
  -webkit-animation: scale 1s 2.6s forwards;
          animation: scale 1s 2.6s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(11) {
  -webkit-animation: scale 1s 2.66s forwards;
          animation: scale 1s 2.66s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(12) {
  -webkit-animation: scale 1s 2.72s forwards;
          animation: scale 1s 2.72s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(13) {
  -webkit-animation: scale 1s 2.78s forwards;
          animation: scale 1s 2.78s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(14) {
  -webkit-animation: scale 1s 2.84s forwards;
          animation: scale 1s 2.84s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(15) {
  -webkit-animation: scale 1s 2.9s forwards;
          animation: scale 1s 2.9s forwards;
  transform: scale(0);
}
input#index3:checked + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(16) {
  -webkit-animation: scale 1s 2.96s forwards;
          animation: scale 1s 2.96s forwards;
  transform: scale(0);
}

input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(1) {
  -webkit-animation: scaleBack 0.3s 0s forwards;
          animation: scaleBack 0.3s 0s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(2) {
  -webkit-animation: scaleBack 0.3s 0.1s forwards;
          animation: scaleBack 0.3s 0.1s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people label:nth-of-type(3) {
  -webkit-animation: scaleBack 0.3s 0.2s forwards;
          animation: scaleBack 0.3s 0.2s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__select {
  -webkit-animation: scaleBack 0.3s 0.4s forwards;
          animation: scaleBack 0.3s 0.4s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__small {
  -webkit-animation: scaleBack 0.3s 0.3s forwards;
          animation: scaleBack 0.3s 0.3s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(1) {
  -webkit-animation: scaleBack 0.3s 0.06s forwards;
          animation: scaleBack 0.3s 0.06s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(2) {
  -webkit-animation: scaleBack 0.3s 0.12s forwards;
          animation: scaleBack 0.3s 0.12s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(3) {
  -webkit-animation: scaleBack 0.3s 0.18s forwards;
          animation: scaleBack 0.3s 0.18s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(4) {
  -webkit-animation: scaleBack 0.3s 0.24s forwards;
          animation: scaleBack 0.3s 0.24s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(5) {
  -webkit-animation: scaleBack 0.3s 0.3s forwards;
          animation: scaleBack 0.3s 0.3s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(6) {
  -webkit-animation: scaleBack 0.3s 0.36s forwards;
          animation: scaleBack 0.3s 0.36s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(7) {
  -webkit-animation: scaleBack 0.3s 0.42s forwards;
          animation: scaleBack 0.3s 0.42s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(8) {
  -webkit-animation: scaleBack 0.3s 0.48s forwards;
          animation: scaleBack 0.3s 0.48s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(9) {
  -webkit-animation: scaleBack 0.3s 0.54s forwards;
          animation: scaleBack 0.3s 0.54s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(10) {
  -webkit-animation: scaleBack 0.3s 0.6s forwards;
          animation: scaleBack 0.3s 0.6s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(11) {
  -webkit-animation: scaleBack 0.3s 0.66s forwards;
          animation: scaleBack 0.3s 0.66s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(12) {
  -webkit-animation: scaleBack 0.3s 0.72s forwards;
          animation: scaleBack 0.3s 0.72s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(13) {
  -webkit-animation: scaleBack 0.3s 0.78s forwards;
          animation: scaleBack 0.3s 0.78s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(14) {
  -webkit-animation: scaleBack 0.3s 0.84s forwards;
          animation: scaleBack 0.3s 0.84s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(15) {
  -webkit-animation: scaleBack 0.3s 0.9s forwards;
          animation: scaleBack 0.3s 0.9s forwards;
  transform: scale(1);
}
input#index3:not(:checked) + input + input + input + div + div + div + div + div + div + div.people .intro_people__large span:nth-of-type(16) {
  -webkit-animation: scaleBack 0.3s 0.96s forwards;
          animation: scaleBack 0.3s 0.96s forwards;
  transform: scale(1);
}

input#index4:checked + input + input + div + div + div + div + div + div + div + div {
  transform: scale(1);
}

input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div {
  transform: scale(0);
}

input#index4:checked + input + input + div + div + div {
  background-position: -8800px 0;
}

input#index4:checked + input + input + div + div + div + div {
  background-position: -4000px 0;
}

input#index4:checked + input + input + div {
  right: 6000px;
}

/* ----------------------------------

Animation chains

------------------------------------- */
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(1) {
  -webkit-animation: scale 1s 2s forwards;
          animation: scale 1s 2s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(2) {
  -webkit-animation: scale 1s 2.1s forwards;
          animation: scale 1s 2.1s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(3) {
  -webkit-animation: scale 1s 2.2s forwards;
          animation: scale 1s 2.2s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__small {
  -webkit-animation: scale 1s 2.3s forwards;
          animation: scale 1s 2.3s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__select {
  -webkit-animation: scale 1s 2.4s forwards;
          animation: scale 1s 2.4s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(1) {
  -webkit-animation: scale 1s 2.06s forwards;
          animation: scale 1s 2.06s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(2) {
  -webkit-animation: scale 1s 2.12s forwards;
          animation: scale 1s 2.12s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(3) {
  -webkit-animation: scale 1s 2.18s forwards;
          animation: scale 1s 2.18s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(4) {
  -webkit-animation: scale 1s 2.24s forwards;
          animation: scale 1s 2.24s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(5) {
  -webkit-animation: scale 1s 2.3s forwards;
          animation: scale 1s 2.3s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(6) {
  -webkit-animation: scale 1s 2.36s forwards;
          animation: scale 1s 2.36s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(7) {
  -webkit-animation: scale 1s 2.42s forwards;
          animation: scale 1s 2.42s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(8) {
  -webkit-animation: scale 1s 2.48s forwards;
          animation: scale 1s 2.48s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(9) {
  -webkit-animation: scale 1s 2.54s forwards;
          animation: scale 1s 2.54s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(10) {
  -webkit-animation: scale 1s 2.6s forwards;
          animation: scale 1s 2.6s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(11) {
  -webkit-animation: scale 1s 2.66s forwards;
          animation: scale 1s 2.66s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(12) {
  -webkit-animation: scale 1s 2.72s forwards;
          animation: scale 1s 2.72s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(13) {
  -webkit-animation: scale 1s 2.78s forwards;
          animation: scale 1s 2.78s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(14) {
  -webkit-animation: scale 1s 2.84s forwards;
          animation: scale 1s 2.84s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(15) {
  -webkit-animation: scale 1s 2.9s forwards;
          animation: scale 1s 2.9s forwards;
  transform: scale(0);
}
input#index4:checked + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(16) {
  -webkit-animation: scale 1s 2.96s forwards;
          animation: scale 1s 2.96s forwards;
  transform: scale(0);
}

input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(1) {
  -webkit-animation: scaleBack 0.3s 0s forwards;
          animation: scaleBack 0.3s 0s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(2) {
  -webkit-animation: scaleBack 0.3s 0.1s forwards;
          animation: scaleBack 0.3s 0.1s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(3) {
  -webkit-animation: scaleBack 0.3s 0.2s forwards;
          animation: scaleBack 0.3s 0.2s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__select {
  -webkit-animation: scaleBack 0.3s 0.4s forwards;
          animation: scaleBack 0.3s 0.4s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__small {
  -webkit-animation: scaleBack 0.3s 0.3s forwards;
          animation: scaleBack 0.3s 0.3s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(1) {
  -webkit-animation: scaleBack 0.3s 0.06s forwards;
          animation: scaleBack 0.3s 0.06s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(2) {
  -webkit-animation: scaleBack 0.3s 0.12s forwards;
          animation: scaleBack 0.3s 0.12s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(3) {
  -webkit-animation: scaleBack 0.3s 0.18s forwards;
          animation: scaleBack 0.3s 0.18s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(4) {
  -webkit-animation: scaleBack 0.3s 0.24s forwards;
          animation: scaleBack 0.3s 0.24s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(5) {
  -webkit-animation: scaleBack 0.3s 0.3s forwards;
          animation: scaleBack 0.3s 0.3s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(6) {
  -webkit-animation: scaleBack 0.3s 0.36s forwards;
          animation: scaleBack 0.3s 0.36s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(7) {
  -webkit-animation: scaleBack 0.3s 0.42s forwards;
          animation: scaleBack 0.3s 0.42s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(8) {
  -webkit-animation: scaleBack 0.3s 0.48s forwards;
          animation: scaleBack 0.3s 0.48s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(9) {
  -webkit-animation: scaleBack 0.3s 0.54s forwards;
          animation: scaleBack 0.3s 0.54s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(10) {
  -webkit-animation: scaleBack 0.3s 0.6s forwards;
          animation: scaleBack 0.3s 0.6s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(11) {
  -webkit-animation: scaleBack 0.3s 0.66s forwards;
          animation: scaleBack 0.3s 0.66s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(12) {
  -webkit-animation: scaleBack 0.3s 0.72s forwards;
          animation: scaleBack 0.3s 0.72s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(13) {
  -webkit-animation: scaleBack 0.3s 0.78s forwards;
          animation: scaleBack 0.3s 0.78s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(14) {
  -webkit-animation: scaleBack 0.3s 0.84s forwards;
          animation: scaleBack 0.3s 0.84s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(15) {
  -webkit-animation: scaleBack 0.3s 0.9s forwards;
          animation: scaleBack 0.3s 0.9s forwards;
  transform: scale(1);
}
input#index4:not(:checked) + input + input + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(16) {
  -webkit-animation: scaleBack 0.3s 0.96s forwards;
          animation: scaleBack 0.3s 0.96s forwards;
  transform: scale(1);
}

input#index5:checked + input + div + div + div + div + div + div + div + div + div {
  transform: scale(1);
}

input#index5:not(:checked) + input + div + div + div + div + div + div + div + div + div {
  transform: scale(0);
}

input#index5:checked + input + div + div + div {
  background-position: -11000px 0;
}

input#index5:checked + input + div + div + div + div {
  background-position: -5000px 0;
}

input#index5:checked + input + div {
  right: 7900px;
}

/* ----------------------------------

Animation chains

------------------------------------- */
input#index5:checked + input + div + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(1) {
  -webkit-animation: scale 1s 2s forwards;
          animation: scale 1s 2s forwards;
  transform: scale(0);
}
input#index5:checked + input + div + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(2) {
  -webkit-animation: scale 1s 2.1s forwards;
          animation: scale 1s 2.1s forwards;
  transform: scale(0);
}
input#index5:checked + input + div + div + div + div + div + div + div + div + div.hab .intro_hab label:nth-of-type(3) {
  -webkit-animation: scale 1s 2.2s forwards;
          animation: scale 1s 2.2s forwards;
  transform: scale(0);
}
input#index5:checked + input + div + div + div + div + div + div + div + div + div.hab .intro_hab__small {
  -webkit-animation: scale 1s 2.3s forwards;
          animation: scale 1s 2.3s forwards;
  transform: scale(0);
}
input#index5:checked + input + div + div + div + div + div + div + div + div + div.hab .intro_hab__select {
  -webkit-animation: scale 1s 2.4s forwards;
          animation: scale 1s 2.4s forwards;
  transform: scale(0);
}
input#index5:checked + input + div + div + div + div + div + div + div + div + div.hab .intro_hab__large span:nth-of-type(1) {
  -webkit-animat.........完整代码请登录后点击上方下载按钮下载查看