本引导页网站源,是由本人第一次学习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>
发表评论