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

ゝ一世哀愁。 2021-09-18 19:16 340阅读 0赞

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 class="index-wrap" id="slide">
    			<section class="sec1">
    				
    				<h3 class="sec1-title">
    				
    				</h3>
    				
    				<p class="sec1-vip">
    					
    					<a href="#">开通会员</a>
    					<a href="#">开通超级会员</a>
    				</p>
    				
    				<div class="figer-1">
    					
    				</div>
    			</section>
    		</section>

实现效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20210724/3803d663cb37434f99fb318ef0cacaf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 1]: /images/20210724/adadb52ea0c3404fba6dee2e55ce815a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 2]: /images/20210724/a1061775a952442d9562cf348a38053b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70 3]: /images/20210724/c4f7121d45fe49be99832fc68dae44ae.png