CSS to achieve the love version loading effect

This article mainly and everybody introduces the pure CSS writes the Love edition loading effect the sample code related material, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Follow the small series together to see it, hope to help everyone.

The love wait effect is as follows:

Now the internet era of many sites, each has its own style, but what kind of style can retain the user's stay to watch it? As far as loading is concerned, many loading effects are the same style may users often visit the site has been accustomed to, if your load time than other sites longer, the effect is the same, may be turned off your site to other sites to watch, but if your loading effect is unique, there are characteristics, You may see your website open when you load the effect, so users won't be able to shut down your website right away.

Today's love version of the load effect is written in pure CSS code, only need to spend a bit of thought, a small amount of code can retain your users, then why not to do it.

Article sharing before the small series recommended my front-end learning Group: 542827633, the inside are learning the front end, if you want to make cool special effects, want to learn the front-end knowledge, small series welcome you to join. Small series will be in the group to share the dry source code, including my carefully collated a front-end tutorial. Welcome all of you interested in the small partners.

HTML code:

<p class= "Flex-container" >  <p class= "unit" >    <p class= "Heart" >      <p class= " heart-piece-0 "></p>      <p class=" heart-piece-1 "></p>      <p class=" Heart-piece-2 "> </p>      <p class= "heart-piece-3" ></p>      <p class= "heart-piece-4" ></p>      <p class= "heart-piece-5" ></p>      <p class= "heart-piece-6" ></p>      <p class= "heart-piece-7 "></p>      <p class=" heart-piece-8 "></p>    </p>    <p>equal love</p >  </p></p>

CSS code:

<style> @import url ("https://fonts.googleapis.com/css?family=Lato:100"); html,body {width:100%; height:100%;}.  Flex-container {width:100%;  height:100%;  position:relative;  Display:-webkit-box;  Display:-ms-flexbox;  Display:flex;      -ms-flex-wrap:wrap;  Flex-wrap:wrap;      -webkit-box-pack:center;          -ms-flex-pack:center;  Justify-content:center;      -webkit-box-align:center;          -ms-flex-align:center; Align-items:center;} Body {background-color: #262e6f;}. unit {text-align:center;}.  Unit p {margin-top:100px;  font-family: ' Lato ', Sans-serif;  font-weight:100;  Text-transform:uppercase; Color: #fff;}.  Heart {position:relative;  font-size:0; width:138px;} [class*= "heart-piece-"]  {Position:absolute;  Top: -5px;  width:10px;  height:10px; border-radius:5px;}.          heart-piece-4 {-webkit-animation:piece-4 3.2s infinite; Animation:piece-4 3.2s Infinite;}. heart-piece-3,.heart-piece-5 {-webkit-animation:piece-3 3.2s infinite; Animation:piece-3 3.2s Infinite;}.          heart-piece-2,.heart-piece-6 {-webkit-animation:piece-2 3.2s infinite; Animation:piece-2 3.2s Infinite;}.          heart-piece-1,.heart-piece-7 {-webkit-animation:piece-1 3.2s infinite; Animation:piece-1 3.2s Infinite;}.          heart-piece-0,.heart-piece-8 {-webkit-animation:piece-0 3.2s infinite; Animation:piece-0 3.2s Infinite;}.  heart-piece-0 {left:0px;          -webkit-animation-delay:0s;  animation-delay:0s; Background-color: #ec2d73;}.  heart-piece-1 {left:16px;          -webkit-animation-delay:0.15s;  animation-delay:0.15s; Background-color: #eb5324;}.  heart-piece-2 {left:32px;          -webkit-animation-delay:0.3s;  animation-delay:0.3s; Background-color: #fdc800;}.  heart-piece-3 {left:48px;          -webkit-animation-delay:0.45s;  animation-delay:0.45s; Background-color: #47b264;}.  heart-piece-4 {left:64px;          -webkit-animation-delay:0.6s;  animation-delay:0.6s; Background-coLor: #1470bd;}.  heart-piece-5 {left:80px;          -webkit-animation-delay:0.75s;  animation-delay:0.75s; Background-color: #76469a;}.  heart-piece-6 {left:96px;          -webkit-animation-delay:0.9s;  animation-delay:0.9s; Background-color: #ec2d73;}.  heart-piece-7 {left:112px;          -webkit-animation-delay:1.05s;  animation-delay:1.05s; Background-color: #eb5324;}.  heart-piece-8 {left:128px;          -webkit-animation-delay:1.2s;  Animation-delay:1.2s; Background-color: #fdc800;}    @-webkit-keyframes piece-4 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:94px;  Top: -23px;    }} @keyframes piece-4 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:94px;  Top: -23px;    }}@-webkit-keyframes piece-3 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:90px;  Top: -31px;    }} @keyframes piece-3 {0, 10%, 90%, 100% {height:10px;  Top: -5px; } 45%, 55% {height:90px;  Top: -31px;    }}@-webkit-keyframes piece-2 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:80px;  Top: -37px;    }} @keyframes piece-2 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:80px;  Top: -37px;    }}@-webkit-keyframes piece-1 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:60px;  Top: -31px;    }} @keyframes piece-1 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:60px;  Top: -31px;    }}@-webkit-keyframes piece-0 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:30px;  Top: -15px;    }} @keyframes piece-0 {0, 10%, 90%, 100% {height:10px;  Top: -5px;    } 45%, 55% {height:30px;  Top: -15px; }} </style>