很漂亮的漫小猫引导页

本引导页网站源，是由本人第一次学习HTML5写的。
所以可能有许多不足的地方。
代码如下
<!--
	作者：漫小猫
	QQ ：2535080855
	博客：blog.lxbkw.com
 邮箱：manxiaomao@qq.com
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta itemprop="name" content="漫小猫"/>
                <meta itemprop="image" content="http://q1.qlogo.cn/g?b=qq&nk=2535080855&s=100" />
                <meta name="description" itemprop="description" content="漫小猫导航主页网站" />
		<title>漫小猫导航</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				<!-- background:#000; -->
			}
			body{
				background: url(http://api.brhsm.cn/tp.png);
				background-size: 100%;
				background-position:center center;
				background-size:cover;
			}
			
			div:nth-child(1){
				width: 280px;
				height: 800px;
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				transform-style: preserve-3d;
				animation: play 30s linear infinite;
			}
			div:nth-child(2){
			 width: 600px;
				height: 400px;
				border-radius: 30px;
				background: rgba(30,144,255, 0.7);
			 position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				z-index:2;
				text-align:center;
			}	
			div:nth-child(1) img{
				width: 280px;
				height: 400px;
				border-radius: 30px;
				position:absolute;
			}
			
			#mann img{
				width: 130px;
				height:130px;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				border-radius: 80px;
				<!-- position:absolute; -->
				
			}
			div img:nth-child(1){transform: rotateY(0deg) translatez(650px);}
			div img:nth-child(2){transform: rotateY(36deg) translatez(650px);}
			div img:nth-child(3){transform: rotateY(72deg) translatez(650px);}
			div img:nth-child(4){transform: rotateY(108deg) translatez(650px);}
			div img:nth-child(5){transform: rotateY(144deg) translatez(650px);}
			div img:nth-child(6){transform: rotateY(180deg) translatez(650px);}
			div img:nth-child(7){transform: rotateY(216deg) translatez(650px);}
			div img:nth-child(8){transform: rotateY(252deg) translatez(650px);}
			div img:nth-child(9){transform: rotateY(288deg) translatez(650px);}
			div img:nth-child(10){transform: rotateY(324deg) translatez(650px);}
            /*div img:nth-child(11){transform: rotateY(324deg) translatez(650px);}*/
			@keyframes play{
				0%{
					transform: rotateX(-20deg) rotateY(0deg);
				}
				25%{
					transform: rotateX(-20deg) rotateY(180deg);
				}
				50%{
					transform: rotateX(-20deg) rotateY(360deg);
				}
				75%{
					transform: rotateX(-20deg) rotateY(540deg);
				}
				100%{
					transform: rotateX(-20deg) rotateY(720deg);
				}
			}
		#mao img:hover{			
				width:400px;
				height: 600px;
				border-top:5px solid red;
    border-radius: 30px;
                <!-- background: #00f ; -->
				}
				
		#mann img:hover{	
				width: 180px;
				height:180px;
				border-radius: 130px;
		animation: tupian 1s linear infinite;
             }		
		@keyframes tupian{
				from{transform: rotate(0deg);}
				to{transform: rotate(-380deg);}
			}	
			
		#mann p{
		           font-size:30px;
			   color:#ff0000;
		}
		
		#mann p:hover{	
		animation: wz 1s ;
             }	
		@keyframes wz{
				from{transform: rotate(0deg);}
				to{transform: rotate(-380deg);}
			} 
		
	.mxm{
	            width: 100%;
				height:64px;
				<!-- background:#000; -->
				
	}		
	.btn1{
	           
	             background:-webkit-linear-gradient(left,  #e41242 0%,#0087ff 80%);
                     width: 190px;
                     height: 45px;
                     float: left;
		     border-radius: 20px;
		     border:5px solid #000;
		     font-size:30px;
		     text-decoration:none;
	}
	.btn2{
	           
	             background:-webkit-linear-gradient(left,  #11d805 0%,#d1ff00 80%);
                 width: 190px;
                 height: 45px;
                 float: left;
				 border-radius: 20px;
				 border:5px solid #000;
				 font-size:30px;
				 text-decoration:none;
	}
	.btn3{
	           
	             background:-webkit-linear-gradient(left,  #00f 0%,#e41242 80%);
                 width: 190px;
                 height: 45px;
                 float: left;
				 border-radius: 20px;
				 border:5px solid #000;
				 font-size:30px;
				 text-decoration:none;
	}
	
	.mxm a:hover{
	animation: wzz 2s;
	}
    @keyframes wzz{
				0%{
					transform: rotateX(-20deg) rotateY(0deg);
				}
				25%{
					transform: rotateX(20deg) rotateY(90deg);
				}
				50%{
					transform: rotateX(-20deg) rotateY(180deg);
				}
				75%{
					transform: rotateX(20deg) rotateY(270deg);
				}
				100%{
					transform: rotateX(-20deg) rotateY(360deg);
				}
			} 
		</style>	

	</head>
	<body>
		<div id="mao">
			<img src="https://manxiaomao.github.io/1/img/1.jpg" />
			<img src="https://manxiaomao.github.io/1/img/2.jpg" />
			<img src="https://manxiaomao.github.io/1/img/3.jpg" />
			<img src="https://manxiaomao.github.io/1/img/4.jpg" />
			<img src="https://manxiaomao.github.io/1/img/5.jpg" />
			<img src="https://manxiaomao.github.io/1/img/6.jpg" />
			<img src="https://manxiaomao.github.io/1/img/7.jpg" />
			<img src="https://manxiaomao.github.io/1/img/8.jpg" />
			<img src="https://manxiaomao.github.io/1/img/9.jpg" />
			<img src="https://manxiaomao.github.io/1/img/10.jpg" />
			<img src="https://manxiaomao.github.io/1/img/0.jpg" />
			<a href="#"></a>
		</div>
		<div id="mann">
		<img src="http://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=2535080855&src_uin=qq.feixue.me&fid=blog&spec=100">
		<br>
		<p>漫小猫</p>
		<br><br>
		<hr>
		<br><br>
		<div class="mxm">
                <a class="btn1" href="https://jq.qq.com/?_wv=1027&k=5ZFqlk5" >QQ群</a>
	        <a class="btn2" href="http://wpa.qq.com/msgrd?v=3&uin=2535080855&site=qq&menu=yes" >QQ</a>
                <a class="btn3" href="https://blog.lxbkw.com" >博客</a>
	        </div>
		</div>
		<audio src="https://manxiaomao.github.io/1/a.mp3" autoplay="autoplay"></audio>
	</body>
</html>
转载请注明出处凌夕博客 »漫小猫原文地址《很漂亮的漫小猫引导页》