html 心跳动画,CSS3 心跳式LOADING动效

CSS

语言：

CSSSCSS

确定

body {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background-color: #373737;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

height: 100vh;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

margin: 0;

}

span {

-webkit-animation: bottom-ripple 1s ease-in-out infinite -50ms;

animation: bottom-ripple 1s ease-in-out infinite -50ms;

background-color: #c0b283;

border-radius: 50%;

box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);

height: 12em;

position: relative;

width: 12em;

}

span::before,

span::after {

border-radius: inherit;

box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);

content: "";

left: 50%;

position: absolute;

top: 50%;

}

span::before {

-webkit-animation: middle-ripple 1s ease-in-out infinite -25ms;

animation: middle-ripple 1s ease-in-out infinite -25ms;

background-color: #dcd0c0;

height: 8em;

margin: -4em 0 0 -4em;

width: 8em;

}

span::after {

-webkit-animation: top-ripple 1s ease-in-out infinite;

animation: top-ripple 1s ease-in-out infinite;

background-color: #f4f4f4;

height: 4em;

margin: -2em 0 0 -2em;

width: 4em;

}

@-webkit-keyframes bottom-ripple {

0% {

box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1);

transform: scale(1);

}

50% {

box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1.25);

transform: scale(1.25);

}

}

@keyframes bottom-ripple {

0% {

box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1);

transform: scale(1);

}

50% {

box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1.25);

transform: scale(1.25);

}

}

@-webkit-keyframes middle-ripple {

0% {

box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1);

transform: scale(1);

}

50% {

box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

}

@keyframes middle-ripple {

0% {

box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1);

transform: scale(1);

}

50% {

box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

}

@-webkit-keyframes top-ripple {

0% {

box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1);

transform: scale(1);

}

50% {

box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1.4);

transform: scale(1.4);

}

}

@keyframes top-ripple {

0% {

box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1);

transform: scale(1);

}

50% {

box-shadow: 0 1.5em 1.5em rgba(0, 0, 0, 0.4);

-webkit-transform: scale(1.4);

transform: scale(1.4);

}

}