基于CSS3关键帧创建的循环心跳动画效果

使用方法

body{
   min-height: 650px; 
   position: relative;
   background: linear-gradient(to right, #d3cce3, #e9e4f0) !important;
}

.cd__main{
   min-height: 650px; 
   position: relative;
   background: linear-gradient(to right, #d3cce3, #e9e4f0) !important;
}

#wrapper {
  position: absolute;
  margin-left: 50px;
  margin-top: 50px;
  animation:pulse 1s infinite;
}


#pulsingheart { 
  position: relative; 
  width: 100px; 
  height: 90px;
} 

#pulsingheart:before, #pulsingheart:after { 
  position: absolute; 
  content: ""; 
  left: 50px; 
  top: 0; 
  width: 50px; 
  height: 80px; 
  background: #aa0000; 
  border-radius: 50px 50px 0 0; 
  transform: rotate(-45deg);  
  transform-origin: 0 100%;
  animation:pulsecolor 1s infinite;
} 

#pulsingheart:after { 
  left: 0; 
  transform: rotate(45deg); 
  transform-origin :100% 100%;
  animation:pulsecolor 1s infinite;
}

@keyframes pulse {
	10% {transform: scale(1.1)}
}

@keyframes pulsecolor {
  10% {background: #dd0000}
}