<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>QQ会员</title> | |
<link href="css/animate.css" rel="stylesheet"/> | |
<link href="css/style.css" rel="stylesheet"/> | |
<script src="js/index.js"></script> | |
</head> | |
<body> | |
<div class="wrap"> | |
<!--头部--> | |
<header class="nav-header"> | |
<div class="head-contain"> | |
<a href="" class="top-logo"><img src="img/logo.png" width="145" height="90"/></a> | |
<nav class="top-nav"> | |
<ul> | |
<li><a href="">功能特权</a></li> | |
<li><a href="">游戏特权</a></li> | |
<li><a href="">生活特权</a></li> | |
<li><a href="">会员活动</a></li> | |
<li><a href="">成长体系</a></li> | |
<li><a href="">年费专区</a></li> | |
<li><a href="">超级会员</a></li> | |
</ul> | |
</nav> | |
<div class="top-right"> | |
<a href="" class="login">登录</a> | |
<a href="" class="open-vip">开通超级会员</a> | |
</div> | |
</div> | |
</header> | |
<section class="index-wrap" id="slide"> | |
<!--第一屏--> | |
<section class="sec1 current"> | |
<h3 class="sec1-title">不做大多数</h3> | |
<p class="sec1-info">QQ会员让我在二次元世界更加肆意挥洒个性</p> | |
<p class="sec1-vip"> | |
<a href="">开通会员</a> | |
<a href="" class="super-vip">开通超级会员</a> | |
</p> | |
<div class="figure-1"></div> | |
</section> | |
<!--第二屏--> | |
<section class="sec2"> | |
<a href="" class="screen-area sec2-area"> | |
<span class="icon icon-feature"></span> | |
</a> | |
<div class="figure-2"></div> | |
<div class="figure-list"> | |
<a href="" class="icon-1"></a> | |
<a href="" class="icon-2"></a> | |
<a href="" class="icon-3"></a> | |
<a href="" class="icon-4"></a> | |
<a href="" class="icon-5"></a> | |
<a href="" class="icon-6"></a> | |
<a href="" class="icon-7"></a> | |
<a href="" class="icon-8"></a> | |
<a href="" class="icon-9"></a> | |
</div> | |
</section> | |
<!--第三屏--> | |
<section class="sec3"> | |
<a href="" class="screen-area sec3-area"> | |
<span class="icon icon-game"></span> | |
</a> | |
<div class="figure-3"></div> | |
<div class="figure-3-mask"></div> | |
<div class="figure1-list"> | |
<span class="sec3-icon icon-monitor"></span> | |
<span class="sec3-icon1 icon-character1"></span> | |
<span class="sec3-icon1 icon-character2"></span> | |
<span class="sec3-icon icon-character3"></span> | |
<span class="sec3-icon icon-character4"></span> | |
<span class="sec3-icon icon-character5"></span> | |
<span class="sec3-icon1 icon-shine"></span> | |
<span class="sec3-icon1 icon-car"></span> | |
<span class="sec3-icon1 icon-flame"></span> | |
</div> | |
<div class="light"></div> | |
</section> | |
<!--第四屏--> | |
<section class="sec4"> | |
<a href="" class="screen-area sec4-area"> | |
<span class="icon icon-life"></span> | |
</a> | |
<div class="figure-4"></div> | |
<div class="figure-4-mask"></div> | |
<div class="figure2-list"> | |
<span class="icon-watch"></span> | |
<span class="icon-headset"></span> | |
<span class="icon-shoe"></span> | |
<span class="icon-glasses"></span> | |
<span class="icon-bag"></span> | |
<span class="icon-perfume"></span> | |
<span class="icon-hat"></span> | |
<span class="icon-dress"></span> | |
</div> | |
</section> | |
<!--第五屏--> | |
<section class="sec5"> | |
<a href="" class="screen-area sec5-area"> | |
<span class="icon icon-makeup"></span> | |
</a> | |
<div class="figure-5"></div> | |
<div class="figure3-list"> | |
<span class="icon-bird"></span> | |
<span class="icon-babyq"></span> | |
<span class="icon-bear"></span> | |
<span class="icon-qana"></span> | |
<span class="icon-dialog1"></span> | |
<span class="icon-dialog2"></span> | |
</div> | |
</section> | |
<footer class="ui-footer"> | |
<nav> | |
<ul> | |
<li> | |
<a href="">官方手Q账号</a> | |
</li> | |
<li> | |
<a href="">官方微信账号</a> | |
</li> | |
<li> | |
<a href="">兑换中心</a> | |
</li> | |
<li> | |
<a href="">官方论坛</a> | |
</li> | |
<li> | |
<a href="">官方空间</a> | |
</li> | |
<li> | |
<a href="">官方微博</a> | |
</li> | |
<li> | |
<a href=""> | |
<span class="foot-icon icon-service"></span> | |
<span>客服中心</span> | |
</a> | |
</li> | |
</ul> | |
</nav> | |
<p>Copyright © 1998 - 2015 Tencent . All Rights Reserved</p> | |
<P>腾讯公司 版权所有</p> | |
</footer> | |
</section> | |
</div> | |
</body> | |
</html> | |
/************animation********/ /**共用**/ /*fadeInUp*/ @-webkit-keyframes fadeInUp{ 0%{ opacity:0; -webkit-transform:translateY(100px); } 100%{ opacity:1; -webkit-transform:translateY(0); } } @-moz-keyframes fadeInUp{ 0%{ opacity:0; -moz-transform:translateY(100px); } 100%{ opacity:1; -moz-transform:translateY(0); } } @-ms-keyframes fadeInUp{ 0%{ filter:alpha( |
QQ会员注册完整代码
最新推荐文章于 2023-10-27 20:56:50 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)