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>
		

实现效果

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