PROMULGATOR

    AwebDE

    浙江省杭州市
    Html
    Css
    Js

    
                        


                        

                            


* {
	margin:0;
	padding:0;
}
body,html,.totle {
	height:100%;
}
.totle {
	padding:10% 15% 0 0;
	width:100%;
	background-color:#333333;
}
.one {
	height:70%;
	width:7%;
	float:right;
	transition:all 1s 0s ease;
	box-shadow:5px 10px 40px black;
	border-radius:10px;
	border-top-right-radius:50px;
	border-bottom-right-radius:50px;
	cursor:default;
	color:white;
	font-family:"微软雅黑";
	display:flex;
	align-items:center;
	overflow:hidden;
}
.text {
	padding:10px;
	font-weight:800;
	text-shadow:0 0 3px #333333;
	font-family:"mv boli";
}
.one:hover {
	cursor:pointer;
}
.one:nth-child(1) {
	background-color:#0000FF;
}
.one:nth-child(2) {
	background-color:#0033FF;
}
.one:nth-child(3) {
	background-color:#0066FF;
}
.one:nth-child(4) {
	background-color:#0099FF;
}
.one:nth-child(5) {
	background-color:#00CCFF;
}
.btn:hover {
	color:bisque;
	-webkit-animation:click .5s ease forwards;
	cursor:pointer;
}
@-webkit-keyframes click {
	from {
	width:350px;
	height:150px;
}
to {
	width:380px;
	height:165px;
}
}.btn {
	width:350px;
	height:150px;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	border-radius:80px;
	font-size:3em;
	color:beige;
	text-shadow:2px 2px 2px #333;
	font-weight:800;
	box-shadow:5px 10px 10px #000;
}
.btn_open {
	background:linear-gradient(#09f,#00f) no-repeat;
	top:50%;
	border:15px solid #00f;
}
.btn_close {
	background:linear-gradient(#ff0,#f00) no-repeat;
	top:80%;
	border:15px solid #c00;
}
.btn_click {
	background:linear-gradient(#909090,#505050) no-repeat;
	border:15px solid #555;
}
@-webkit-keyframes yidong {
	0% {
	height:0;
	margin-right:0;
}
50% {
	margin-right:60%;
	height:70%;
}
100% {
	margin-right:0;
	height:70%;
}
}.yidong {
	-webkit-animation:yidong .1s ease;
}
.pag {
	display:none;
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
响应式标题页

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
新人自制，动态分页效果！

                         

                     

                   
                


                
1



  
    
      
    
    

     

            
    
              
    
              
      
                
       Mistletoe0
      
                
       2017/7/28 11:40:43