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

  }   
  10%, 100% {   
    -webkit-transform: scale(1);   
            transform: scale(1);   
  }   
}   
@-webkit-keyframes pulse {   
  0% {   
    -webkit-transform: scale(0.1, 0.1);   
            transform: scale(0.1, 0.1);   
    opacity: 0.0;   
  }   
  50% {   
    opacity: 1.0;   
  }   
  100% {   
    -webkit-transform: scale(3);   
            transform: scale(3);   
    opacity: 0.0;   
  }   
}   
@keyframes pulse {   
  0% {   
    -webkit-transform: scale(0.1, 0.1);   
            transform: scale(0.1, 0.1);   
    opacity: 0.0;   
  }   
  50% {   
    opacity: 1.0;   
  }   
  100% {   
    -webkit-transform: scale(3);   
            transform: scale(3);   
    opacity: 0.0;   
  }   
}   
@-webkit-keyframes colorchange {   
  0% {   
    background: #bec4bc;   
  }   
  100% {   
    background: #b5e763;   
  }   
}   
@keyframes colorchange {   
  0% {   
    background: #bec4bc;   
  }   
  100% {   
    background: #b5e763;   
  }   
}   
.avatar:nth-of-type(1) {   
  background-image: url("128.jpg");   
}   
  
.avatar:nth-of-type(2) {   
  background-image: url("rasagy.jpg");