很漂亮的漫小猫引导页

Ftfa5YUqyxLcLOd2EqMfDeyDUDjG.png

本引导页网站源,是由本人第一次学习HTML5写的。

所以可能有许多不足的地方

代码如下 


<!--
	作者:漫小猫
	QQ :2535080855
	博客:www.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://www.lxbkw.com" >博客</a>
	        </div>
		</div>
		<audio src="https://manxiaomao.github.io/1/a.mp3" autoplay="autoplay"></audio>
	</body>
</html>


转载请注明出处凌夕博客 »漫小猫原文地址《很漂亮的漫小猫引导页

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(4)

我发现只要f12把oncopy里的return false删了就可以复制了
小小 Google Chrome 71.0.3578.98 非主流操作系统 9个月前 (2019-03-13) 回复
浙江省温州市 电信浙江省温州市 电信
@小小:防小白不努力而设置的,大佬你还需要复制吗
漫小猫 9个月前 (2019-03-13) 回复
@漫小猫:emmm,让你失望了,我就是个小白,来偷点代码的。
小小 9个月前 (2019-03-14) 回复
确实很萌感谢分享
精斑检测试纸 Google Chrome 63.0.3239.132 Windows 7 1年前 (2018-11-05) 回复
浙江省温州市 电信浙江省温州市 电信