SOURCE

<div class="center-element">
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
    <div class="love-icon"></div>
  </div>
  <div class="container">
   	<div class="love-text" style="color:dodgerblue;">母</div>
 </div>
 <div class="container">
   	<div class="love-text" style="color:dodgerblue;">亲</div>
 </div>
 <div class="container">
   	<div class="love-text" style="color:dodgerblue;">节</div>
 </div>
 <div class="container">
    	<div class="love-text" style="color:dodgerblue;">快</div>
  	</div>
  	<div class="container">
    	<div class="love-text" style="color:dodgerblue;">乐</div>
  	</div>
  	<div class="container">
    	<div class="love-text" style="color:dodgerblue;">~</div>
  	</div>
</div>

html, body {
  height: 100vh;
}

.center-element {
  margin: 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
  top: 60%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.container {
  display: inline-block;
  position: absolute;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  bottom: 0;
}

.container:nth-child(1) {
  height: 249px;
  width: 43px;
  -webkit-transform: rotate(13deg);
          transform: rotate(13deg);
}

.container:nth-child(2) {
  height: 309px;
  width: 27px;
  -webkit-transform: rotate(14deg);
          transform: rotate(14deg);
}

.container:nth-child(3) {
  height: 254px;
  width: 44px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.container:nth-child(4) {
  height: 181px;
  width: 48px;
  -webkit-transform: rotate(-54deg);
          transform: rotate(-54deg);
}

.container:nth-child(5) {
  height: 192px;
  width: 44px;
  -webkit-transform: rotate(-26deg);
          transform: rotate(-26deg);
}

.container:nth-child(6) {
  height: 277px;
  width: 35px;
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
}

.container:nth-child(7) {
  height: 259px;
  width: 31px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.container:nth-child(8) {
  height: 344px;
  width: 18px;
  -webkit-transform: rotate(-28deg);
          transform: rotate(-28deg);
}

.container:nth-child(9) {
  height: 135px;
  width: 20px;
  -webkit-transform: rotate(-7deg);
          transform: rotate(-7deg);
}

.container:nth-child(10) {
  height: 134px;
  width: 29px;
  -webkit-transform: rotate(-33deg);
          transform: rotate(-33deg);
}

.container:nth-child(11) {
  height: 190px;
  width: 34px;
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
}

.container:nth-child(12) {
  height: 324px;
  width: 39px;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
}

.container:nth-child(13) {
  height: 363px;
  width: 37px;
  -webkit-transform: rotate(-26deg);
          transform: rotate(-26deg);
}

.container:nth-child(14) {
  height: 342px;
  width: 31px;
  -webkit-transform: rotate(-21deg);
          transform: rotate(-21deg);
}

.container:nth-child(15) {
  height: 185px;
  width: 20px;
  -webkit-transform: rotate(-42deg);
          transform: rotate(-42deg);
}

.container:nth-child(16) {
  height: 198px;
  width: 45px;
  -webkit-transform: rotate(-39deg);
          transform: rotate(-39deg);
}

.container:nth-child(17) {
  height: 337px;
  width: 30px;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}

.container:nth-child(18) {
  height: 172px;
  width: 45px;
  -webkit-transform: rotate(17deg);
          transform: rotate(17deg);
}

.container:nth-child(19) {
  height: 220px;
  width: 33px;
  -webkit-transform: rotate(-33deg);
          transform: rotate(-33deg);
}

.container:nth-child(20) {
  height: 236px;
  width: 37px;
  -webkit-transform: rotate(-27deg);
          transform: rotate(-27deg);
}

.container:nth-child(21) {
  height: 300px;
  width: 47px;
  -webkit-transform: rotate(32deg);
          transform: rotate(32deg);
}

.container:nth-child(22) {
  height: 205px;
  width: 36px;
  -webkit-transform: rotate(-28deg);
          transform: rotate(-28deg);
}

.container:nth-child(23) {
  height: 354px;
  width: 16px;
  -webkit-transform: rotate(-13deg);
          transform: rotate(-13deg);
}

.container:nth-child(24) {
  height: 241px;
  width: 30px;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}

.container:nth-child(25) {
  height: 175px;
  width: 26px;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}

.container:nth-child(26) {
  height: 341px;
  width: 14px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.container:nth-child(27) {
  height: 142px;
  width: 26px;
  -webkit-transform: rotate(-41deg);
          transform: rotate(-41deg);
}

.container:nth-child(28) {
  height: 181px;
  width: 22px;
  -webkit-transform: rotate(44deg);
          transform: rotate(44deg);
}

.container:nth-child(29) {
  height: 271px;
  width: 39px;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}

.container:nth-child(30) {
  height: 305px;
  width: 40px;
  -webkit-transform: rotate(-43deg);
          transform: rotate(-43deg);
}

.container:nth-child(31) {
  height: 164px;
  width: 47px;
  -webkit-transform: rotate(-9deg);
          transform: rotate(-9deg);
}

.container:nth-child(32) {
  height: 309px;
  width: 34px;
  -webkit-transform: rotate(-18deg);
          transform: rotate(-18deg);
}

.container:nth-child(33) {
  height: 146px;
  width: 37px;
  -webkit-transform: rotate(-13deg);
          transform: rotate(-13deg);
}

.container:nth-child(34) {
  height: 283px;
  width: 31px;
  -webkit-transform: rotate(26deg);
          transform: rotate(26deg);
}

.container:nth-child(35) {
  height: 271px;
  width: 12px;
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
}

.container:nth-child(36) {
  height: 228px;
  width: 27px;
  -webkit-transform: rotate(-7deg);
          transform: rotate(-7deg);
}

.container:nth-child(37) {
  height: 310px;
  width: 19px;
  -webkit-transform: rotate(-36deg);
          transform: rotate(-36deg);
}

.container:nth-child(38) {
  height: 320px;
  width: 18px;
  -webkit-transform: rotate(-6deg);
          transform: rotate(-6deg);
}

.container:nth-child(39) {
  height: 171px;
  width: 26px;
  -webkit-transform: rotate(-22deg);
          transform: rotate(-22deg);
}

.container:nth-child(40) {
  height: 181px;
  width: 16px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.container:nth-child(41) {
  height: 182px;
  width: 33px;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}

.container:nth-child(42) {
  height: 209px;
  width: 38px;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}

.container:nth-child(43) {
  height: 220px;
  width: 16px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.container:nth-child(44) {
  height: 209px;
  width: 29px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}

.container:nth-child(45) {
  height: 182px;
  width: 33px;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}

.container:nth-child(46) {
  height: 185px;
  width: 26px;
  -webkit-transform: rotate(47deg);
          transform: rotate(47deg);
}

.container:nth-child(47) {
  height: 271px;
  width: 18px;
  -webkit-transform: rotate(-9deg);
          transform: rotate(-9deg);
}

.container:nth-child(48) {
  height: 336px;
  width: 23px;
  -webkit-transform: rotate(13deg);
          transform: rotate(13deg);
}

.container:nth-child(49) {
  height: 203px;
  width: 29px;
  -webkit-transform: rotate(-43deg);
          transform: rotate(-43deg);
}

.container:nth-child(50) {
  height: 145px;
  width: 44px;
  -webkit-transform: rotate(-24deg);
          transform: rotate(-24deg);
}
.container:nth-child(51)  {
  height: 145px;
  width: 4px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.container:nth-child(52)  {
  height: 45px;
  width: 144px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.love-icon {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background-image: url(http://medinnna.com/love.png);
  background-size: 100%;
  -webkit-animation: test 5.5s ease infinite;
          animation: test 5.5s  ease infinite;
  /*-webkit-animation-iteration-count:3; 
   		  animation-iteration-count:3;*/
       
   
}
.love-text {
  width: 100%;
  padding-bottom: 100%;
  position: relative;  
  background-size: 100%;
  -webkit-animation: test 3.5s ease infinite;
          animation: test 3.5s ease infinite;  
  font-family: "微软雅黑";
  -webkit-animation-iteration-count:3; /* Safari 和 Chrome */
   		  animation-iteration-count:3;
       
}

@-webkit-keyframes test {
  0% {
    top: 80%;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    top: 0%;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}

@keyframes test {
  0% {
    top: 80%;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  100% {
    top: 0%;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}