HTML5 华丽的孔雀开屏动画

孔雀的屁股是可以摸的，摸摸看嗯

peacock,butt

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2822
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$('#body').on('click', function(){
 $('.wrapper1').addClass('dance1').delay(1200).queue(function(){
   $(this).removeClass('dance1');
   $(this).dequeue();
 });
 $('.wrapper2').addClass('dance2').delay(1200).queue(function(){
   $(this).removeClass('dance2');
   $(this).dequeue();
 });
 $('.wrapper3').addClass('dance3').delay(1200).queue(function(){
   $(this).removeClass('dance3');
   $(this).dequeue();
 });
 $('.wrapper4').addClass('dance4').delay(1200).queue(function(){
   $(this).removeClass('dance4');
   $(this).dequeue();
 });
 $('.wrapper5').addClass('dance5').delay(1200).queue(function(){
   $(this).removeClass('dance5');
   $(this).dequeue();
 });
 $('.wrapper6').addClass('dance6').delay(1200).queue(function(){
   $(this).removeClass('dance6');
   $(this).dequeue();
 });
 $('.wrapper7').addClass('dance7').delay(1200).queue(function(){
   $(this).removeClass('dance7');
   $(this).dequeue();
 });
 $('.wrapper8').addClass('dance8').delay(1200).queue(function(){
   $(this).removeClass('dance8');
   $(this).dequeue();
 });
});

编译

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }

html {
  height: 100%; }

body {
  height: 100%;
  overflow: hidden; }

body .container {
  margin: 100px auto 0 20px;
  height: 100%;
  width: 500px;
  transform: rotate(90deg); }

body .container .row {
  clear: both;
  /* === ARRANGING THE FEATHERS === */ }

.row1 {
  transform: rotate(50deg);
  position: relative;
  left: 0;
  top: 0;
  z-index: 400; }

.row2 {
  transform: rotate(45deg);
  position: relative;
  left: -20px;
  top: -45px;
  z-index: 500; }

.row3 {
  transform: rotate(39deg);
  position: relative;
  left: -40px;
  top: -85px;
  z-index: 200; }

.row4 {
  transform: rotate(32deg);
  position: relative;
  left: -60px;
  top: -120px;
  z-index: 400; }

.row5 {
  transform: rotate(26deg);
  position: relative;
  left: -75px;
  top: -150px;
  z-index: 300; }

.row6 {
  transform: rotate(18deg);
  position: relative;
  left: -90px;
  top: -175px;
  z-index: 500; }

.row7 {
  transform: rotate(11deg);
  position: relative;
  left: -100px;
  top: -200px;
  z-index: 200; }

.row8 {
  transform: rotate(5deg);
  position: relative;
  left: -105px;
  top: -225px;
  z-index: 700; }

.row9 {
  transform: rotate(0deg);
  position: relative;
  left: -107px;
  top: -252px;
  z-index: 300;
  /* MIDDLE! */ }

.row10 {
  transform: rotate(-5deg);
  position: relative;
  left: -105px;
  top: -278px;
  z-index: 400; }

.row11 {
  transform: rotate(-11deg);
  position: relative;
  left: -100px;
  top: -302px;
  z-index: 200; }

.row12 {
  transform: rotate(-18deg);
  position: relative;
  left: -90px;
  top: -328px;
  z-index: 500; }

.row13 {
  transform: rotate(-26deg);
  position: relative;
  left: -75px;
  top: -352px;
  z-index: 600; }

.row14 {
  transform: rotate(-32deg);
  position: relative;
  left: -60px;
  top: -382px;
  z-index: 300; }

.row15 {
  transform: rotate(-39deg);
  position: relative;
  left: -40px;
  top: -418px;
  z-index: 400; }

.row16 {
  transform: rotate(-45deg);
  position: relative;
  left: -20px;
  top: -458px;
  z-index: 500; }

.row17 {
  transform: rotate(-50deg);
  position: relative;
  left: 0;
  top: -502px;
  z-index: 300;
  /* === STYLING THE INDIVIDUAL BLOCKS === */ }

.wrapper {
  position: relative;
  perspective: 500px; }

.block {
  width: 50px;
  height: 50px;
  background: linear-gradient(to bottom right, #34a25b, #111708 35%, #86d685 37%, #34a25b 39%, #111708 50%, #86d685 52%, #34a25b 54%, #111708 60%, #2b823e 65%, #34a25b 66%, #111708 72%, #34a25b 76%, #111708 78%, #216324 80%, #111708 82%, #244116 84%, #111708 86%, #080403 88%);
  border: 1px solid grey;
  border-radius: 10% 30% 40% 30%;
  float: left;
  transform: rotateZ(-45deg);
  transition: all 0.2s; }

.wrapper:hover .block {
  transform: rotateY(45deg) rotateZ(-45deg); }

.outerRound {
  margin: 15% auto;
  padding: 10% 0 0 10%;
  width: 70%;
  height: 70%;
  background: radial-gradient(#d15e00 45%, #fff30f 60%, #ffbc1f 70%, #d15e00 85%);
  border-radius: 10% 50% 60% 50%;
  border-bottom: 3px solid #222;
  border-right: 3px solid #222;
  border-left: 1px solid #222;
  border-top: 1px solid #222;
  box-shadow: 0 0 2px 2px #86d685; }

.middleRound {
  margin: 4% 0 0 4%;
  padding: 7% 0 0 7%;
  width: 80%;
  height: 80%;
  background: linear-gradient(to top left, #1d2ddd 5%, #2652e3 40%, #6a8aec 70%);
  border-radius: 50%; }

.innerRound {
  width: 75%;
  height: 75%;
  background: radial-gradient(#001c99 45%, #1d2ddd 60%, #b88400 90%);
  border-radius: 50% 30%;
  border-left: 1px solid #222;
  border-top: 1px solid #222; }

.body {
  width: 115px;
  height: 125px;
  background: radial-gradient(#0b0754, #040d2a 8%, #0b0754 52%, #040d2a 80%);
  border-radius: 50%;
  position: absolute;
  top: 110px;
  right: 100px;
  z-index: 1000; }

.text {
  width: 250px;
  transform: rotate(-90deg);
  position: absolute;
  top: -110px;
  right: 25px; }

.text h1 {
  margin: 0;
  padding: 0;
  line-height: 0.8;
  font-family: sans-serif; }

.text h1 .arrow {
  font-size: 40px;
  line-height: 0.5; }

.text h4 {
  margin: 0;
  padding-left: 25px;
  font-family: sans-serif;
  /* === ANIMATION FOR THE TAIL === */
  /* Mixin! */
  /* Keyframes! */ }

@-webkit-keyframes move1 {
  0% {
    top: 0; }

25% {
    top: 58px; }

75% {
    top: -48px; }

100% {
    top: 0; } }

@-webkit-keyframes move2 {
  0% {
    top: 0; }

25% {
    top: 43px;
    transform: rotate(-2deg); }

75% {
    top: -40px;
    transform: rotate(1deg); }

100% {
    top: 0; } }

@-webkit-keyframes move3 {
  0% {
    top: 0; }

25% {
    top: 36px;
    transform: rotate(-2deg); }

75% {
    top: -32px;
    transform: rotate(1deg); }

100% {
    top: 0; } }

@-webkit-keyframes move4 {
  0% {
    top: 0; }

25% {
    top: 28px;
    transform: rotate(-2deg); }

75% {
    top: -26px;
    transform: rotate(1deg); }

100% {
    top: 0; } }

@-webkit-keyframes move5 {
  0% {
    top: 0; }

25% {
    top: 23px;
    transform: rotate(-2deg); }

75% {
    top: -20px;
    transform: rotate(1deg); }

100% {
    top: 0; } }

@-webkit-keyframes move6 {
  0% {
    top: 0; }

25% {
    top: 18px;
    transform: rotate(-2deg); }

75% {
    top: -15px;
    transform: rotate(1deg); }

100% {
    top: 0; } }

@-webkit-keyframes move7 {
  0% {
    top: 0; }

25% {
    top: 10px;
    transform: rotate(-2deg); }

75% {
    top: -7px;
    transform: rotate(1deg); }

100% {
    top: 0; } }

@-webkit-keyframes move8 {
  /* The actual movement classes */
  0% {
    top: 0; }

25% {
    top: 5px;
    transform: rotate(-2deg); }

75% {
    top: -2px;
    transform: rotate(1deg); }

100% {
    top: 0; } }

.dance1 {
  -webkit-animation: move1 0.7s ease-out 0.38s 1; }

.dance2 {
  -webkit-animation: move2 0.7s ease-out 0.35s 1; }

.dance3 {
  -webkit-animation: move3 0.7s ease-out 0.32s 1; }

.dance4 {
  -webkit-animation: move4 0.7s ease-out 0.29s 1; }

.dance5 {
  -webkit-animation: move5 0.7s ease-out 0.26s 1; }

.dance6 {
  -webkit-animation: move6 0.7s ease-out 0.23s 1; }

.dance7 {
  -webkit-animation: move7 0.7s ease-out 0.2s 1; }

.dance8 {
  -webkit-animation: move8 0.7s ease-out 1; }

HTML

<div class="container">
  <div class="row row1 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row2 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row3 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row4 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row5 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row6 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row7 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row8 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row9 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row10 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row11 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row12 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row13 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row14 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row15 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row16 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row row17 clearfix">
    <div class="wrapper wrapper1">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper2">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper3">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper4">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper5">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper6">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper7">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper wrapper8">
      <div class="block">
        <div class="outerRound">
          <div class="middleRound">
            <div class="innerRound"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="body" id="body"></div>
  
  <div class="text">
    <h1><span class="arrow">⇦</span> Click the peacock's butt!</h1>
  </div>
  
</div>

孔雀的屁股是可以摸的，摸摸看嗯

peacock,butt

编辑器支持Emmet

快捷键

孔雀的屁股是可以摸的，摸摸看嗯

peacock,butt

HTML5 GSAP移动应用中点击按钮液体弥漫全屏的交互动画

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：