CSS3动画效果，文字图片切入效果，仿QQ会员页面

CSS

 .sec1
  {
   height: 834px;
   /*no-repeat:不平铺,图片多大显示多大*/
   background: url(img/bg_1.jpg) no-repeat center top;
   -webkit-perspective:1000px;
   perspective:1000px;
  }
  .sec1 .figer-1
  {
   /*//绝对定位*/
   
   position: absolute;
   width:720px;
   height:656px;
   top:50px;
   left: 50%;
   background:url(img/figure_1.png) no-repeat 100% 17px;
   
   /*CSS3动画效果（由近到远）*/
   -webkit-animation: figer-1 0.4s ease 1;
   -moz-animation: figer-1 0.4s ease 1;
   -ms-animation: figer-1 0.4s ease 1;
   animation: figer-1 0.4s ease 1;
  }
  
  /*CSS3动画效果实现 (name与animation中的name一致)*/
  @-webkit-keyframes figer-1{
   
   0%{
     /*动画显示大小 translateX(X表示水平动画进入，Y垂直动画进入，Z由近到远)*/
     -webkit-transform:translateX(1000px);
   }
   100%{
    -webkit-transform:translateX(50);
   }
  }
  
  .sec1 .sec1-title
  {
   position:absolute;
   z-index:3;
   line-height:999;
   /*//当图片超出页面时,把多的部分隐藏*/
   left:50%;
   margin-left:-540px;
   top:175px;

   overflow:hidden;
   width: 770px;
   height:265px;
   background:url(img/sprites_index.png) no-repeat;
   
   /*CSS3动画效果*/
   -webkit-animation: info 0.4s ease 1;
   -moz-animation: info 0.4s ease 1;
   -ms-animation: info 0.4s ease 1;
   animation: info 0.4s ease 1;
   
   
  }
  
   /*CSS3动画效果实现*/
  @-webkit-keyframes info{
   0%{
     -webkit-transform:translateZ(1000px);
   }
   100%{
    -webkit-transform:translateZ(50);
   }
  }
  /* 开通会员与开通超级会员 */
  .sec1 .sec1-vip{
   position: absolute;
   opacity: 0;
   left: 50%;
   margin-left: -548px;
   top:500px;
   -webkit-animation: info-vip 1s ease 1 both;
   -moz-animation: info-vip 1s ease 1 both;
   -ms-animation: info-vip 1s ease 1 both;
   animation: info-vip 1s ease 1 both;
  }
     
  .sec1 .sec1-vip a{
      font-size: 26px;
      border: 2px solid yellow;
      border-radius: 26px;
      display: inline-block;
      width: 180px;
      color: orange;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin-left: 35px;
      text-decoration: none;
  }
 
  .sec1 .sec1-vip a:hover{
  background-color: #fad65c;
  color: floralwhite;
  }
 /* 设置动画 */
 @keyframes info-vip{
   0%{
    opacity: 0;
     -webkit-transform:translateY(1000px);
   }
   100%{
    opacity: 1;
    -webkit-transform:translateY(50);
   }
 }

HTML

<!--//section:区域区块标签--> 
  <section class="index-wrap" id="slide">
   <section class="sec1">
    <!--//h3:标题标签-->
    <h3 class="sec1-title">
    <!--  不做大多数 （由近到远显示）-->
    </h3>
    
    <p class="sec1-vip">
     <!-- 从下到上动画显示，在不做大多数显示完成之后 -->
     <a href="#">开通会员</a>
     <a href="#">开通超级会员</a>
    </p>
    
    <div class="figer-1">
     <!-- 女生人物（水平动画） -->
    </div>
   </section>
  </section>

实现效果

最后附上素材（注意最后一张是精灵图，需要自行切割）