css3动画心跳效果,css

css

html,body{

width: 100%;

height: 100%;

}

body{

margin: 0;

display:flex;

justify-content:center;

align-items:center;

background-image: radial-gradient(pink, #FF8888);

}

.heart{

width: 60px;

height: 60px;

background-color: tomato;

position: relative;

animation:beat .6s infinite ease-in;

}

.heart:before, .heart:after{

content:"";

position: absolute;

width: 60px; height: 60px;

background-color: tomato;

border-radius: 50%;

}

.heart:before{

left: 30px;

}

.heart:after{

top: -30px;

}

@keyframes beat{

0%{

transform:scale(1) rotate(-45deg);

}

40%{

transform:scale(1) rotate(-45deg);

}

55%{

transform:scale(1.3) rotate(-30deg);

}

70%{

transform:scale(1) rotate(-45deg);

}

85%{

transform:scale(1.3) rotate(-60deg);

}

100%{

transform:scale(1) rotate(-45deg);

}

}