一款利用html5和css3动画排列人物头像的实例演示

          animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
.avatar:nth-of-type(8):before {   
  -webkit-animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
  
.image {   
  position: absolute;   
  top: 0;   
  rightright: 0;   
  bottombottom: 0;   
  left: 0;   
  margin: auto;   
  height: 220px;   
  width: 220px;   
}   
.image img {   
  position: relative;   
  height: 220px;   
  width: 220px;   
  border-radius: 50%;   
  z-index: 1;   
}   
.image:before {   
  position: absolute;   
  top: 0;   
  rightright: 0;   
  bottombottom: 0;   
  left: 0;   
  margin: auto;   
  content: ”;   
  height: 100%;   
  width: 100%;   
  background: #f9fff7;   
  border: 3px solid #e7f5d1;   
  border-radius: 50%;   
  -webkit-animation: pulse 1s 1.4s ease-out;   
          animation: pulse 1s 1.4s ease-out;   
  -webkit-animation-iteration-count: 3;   
          animation-iteration-count: 3;   
}   
.image .smiley {   
  position: absolute;   
  top: -8px;   
  rightright: -8px;   
  height: 64px;