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

        <figure class=’avatar’>  
        </figure>  
        <figure class=’avatar’>  
        </figure>  
    </div>  

　　css3代码：

CSS Code复制内容到剪贴板

.stage {   
  position: absolute;   
  top: 0;   
  rightright: 0;   
  bottombottom: 0;   
  left: 0;   
  margin: auto;   
  height: 460px;   
  width: 480px;   
}   
  
.avatar {   
  position: absolute;   
  top: 0;   
  rightright: 0;   
  bottombottom: 0;   
  left: 0;   
  margin: auto;   
  height: 64px;   
  width: 64px;   
  background-repeat: no-repeat;   
  background-size: cover;   
  border-radius: 50%;   
  -webkit-transform-origin: center;   
      -ms-transform-origin: center;   
          transform-origin: center;   
}   
.avatar:before {   
  content: ”;   
  position: absolute;   
  top: -8%;   
  rightright: -8%;   
  height: 17.06667px;   
  width: 17.06667px;   
  background: #bec4bc;   
  border-radius: 50%;   
  border: 3px solid white;   
}   
.avatar:nth-of-type(1) {   
  -webkit-animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
          animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
}   
@-webkit-keyframes ani1 {   
  0%, 20% {   
    -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
            transform: rotate(45deg) translate(0) rotate(-45deg);