css3加载爱心,纯css写出爱心版加载效果，等待加载也是一种享受

现在互联网时代网站何其多，各有各得风格，但是什么样的风格能留住用户的停留观看呢？就从加载来说，很多加载效果都是同一种风格可能用户经常逛网站早已经习惯，要是你的加载时间比其他网站时间长，效果还是一样的，可能就会关掉你的网站去其他网站观看，但是如果你的加载效果别具一格，有特点，可能用户看你加载效果的时候你的网站就打开了，这样用户也就不会立刻关掉你的网站。

html代码：

equal love

css代码：

@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;

}

}

如果有对前端感兴趣前端程序员，可以加入我们的web前端技术学习群哦1893，94454。会送前端的精品教程噢！