资源链接
https://download.csdn.net/download/weixin_45525272/14835381
展示
代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/index.css" /> </head> <body> <!-- 导航栏部分 --> <div id="topbar" class="topbar"> <div class="toppic"> <div class="topside"> <a href="#" class="logoLink">im.qq.com</a> <ul id="topNav" class="topNav"> <li class="current"><a href="#">首页</a></li> <li><a href="#">下载</a></li> <li><a href="#">动态</a></li> </ul> </div> <div class="topTool"> <a class="barzc" href="#" target="_blank">注册</a> <ul> <li id="loginInfo"> <a id="login" href="#">登录</a> <div id="loginPenel" class="loginPenel"> <span class="trg"></span> <div class="logindrop"> <div id="nick" class="nick">Hi,飞翔的企鹅</div> <div class="lgout"><a id="lgout" href="javascript:;">[退出]</a></div> </div> </div> </li> <li><a href="#" target="_blank">QQ安全</a></li> <li><a href="#" target="_blank">QQ会员</a></li> </ul> <div class="flashData"><a id="viewOnline" href="#">当前在线人数:<em id="cur_online">227,763,015</em></a></div> </div> </div> </div> <!-- 中间部分 --> <!--S banner--> <div class="crossbanenr wrap"> <ul id="crossbanenr"> <li class="timbg"> <div class="tim-content tim"> <div class="bnleft"> <div class="tim-wenzi"></div> <div class="tim-btn"> <a href="#" target="_blank"></a> </div> <div class="tim-icon"></div> </div> <img src="images/doc-j2.png" class="tim-img"> </div> </li> </ul> </div> <!-- 页面主题部分 --> <div class="content"> <h1>I'm QQ - 每一天,乐在沟通</h1> <div id="fisrtbg" class="activebg fisrtbg" data-stellar-background-ratio="0.3"></div> <div class="qfigure qcall"> <div class="qw960"> <div class="txtwrap"> <h2>沟通,是跨越千山万水的亲切声音</h2> <p>无论何时何地,你都能自由享受QQ在各类终端<br />上带来的高清通话,与好友一起想聊多久聊多久</p> <p><a class="knmore" href="#" target="_blank">了解更多 ></a></p> <ul class="figs"> <li class="f01">屏幕分享</li> <li class="f02">群组通话</li> <li class="f03">两人、多人通话</li> </ul> </div> <div class="qcallAnimate"> </div> </div> </div> </div> <div id="secondbg" class="activebg secondbg" data-stellar-background-ratio="0.3"></div> <div class="qfigure qfile"> <div class="qw960"> <div class="txtwrap"> <h2>沟通,是随时随地爽快收发</h2> <p>通过QQ,电脑和手机上的文件都能收发自如,<br />更有手机在线查阅,轻松你的工作和生活。</p> <p><a class="knmore" href="#" target="_blank">了解更多 ></a></p> <ul class="figs"> <li class="f01">文件漫游</li> <li class="f02">多端互传</li> <li class="f03">在线预览</li> </ul> </div> <div class="qfileAnimate"> </div> </div> </div> <div id="thirdbg" class="activebg thirdbg" data-stellar-background-ratio="0.3"></div> <div class="qfigure qblog"> <div class="qw960"> <div class="txtwrap"> <h2>沟通,是志同道合的他们放肆青春</h2> <p>即使世界很大,你也不会孤单,在兴趣部落<br />有和你一样的人,期待着和你一起发现精彩</p> <p><a class="knmore" href="#" target="_blank">了解更多 ></a></p> <ul class="figs"> <li class="f01">精彩图集</li> <li class="f02">附近热点</li> <li class="f03">兴趣社区</li> </ul> </div> <div class="qblogAnimate"> <div class="qblogWrap"> <div class="pic1"></div> <div class="pic2"></div> <div class="pic3"></div> </div> </div> </div> </div> <!-- 页面底部制作 --> <!--S footer--> <div class="newfoot"> <div class="qmaps"> <div class="plats"> <h3>了解热门产品</h3> <a class="plmb" href="#" target="_blank">QQ 手机版</a> <a class="plpc" href="#" target="_blank">QQ PC版</a> <a class="plmac" href="#" target="_blank">QQ Mac版</a> <a class="plpad" href="#" target="_blank">QQ Pad版</a> </div> <div class="map qac"> <h3>QQ安全</h3> <ul> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> </ul> </div> <div class="map qfaq"> <h3>帮助反馈</h3> <ul> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> </ul> </div> <div class="map qlink"> <h3>友情链接</h3> <ul> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> <li><a href="#" target="_blank">安全中心</a></li> </ul> </div> </div> <div class="copyright"> <p>Copyright © 1998- <script> document.write((new Date()).getFullYear()); </script> Tencent. All Rights Reserved.</p> <p>腾讯公司 版权所有</p> </div> </div> <div id="overlay" class="overlay"></div> <div id="flashDiv"> <div class="flashBar"><a id="flashClose" href="#" class="close">关闭</a></div> <div class="flashBox"> <div id="flashBox"> <p> <a href="#"><img src="images/get_flash_player.gif" alt="Get Adobe Flash player" /></a> </p> </div> </div> </div> </body> </html>
index.css
body { font-size: 20px; color: white; text-shadow: 0 1px 0 black, 0 0 5px black; } p { padding: 0 0.5em; margin: 0; } html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; font-family: Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", STXihei, STHeiti, Heiti, SimSun, sans-serif; font-size: 100%; } html, body { color: #333 } body { background: #fff; overflow-x: hidden; } ul, ol, li { list-style: none; } a:link, a:visited { color: #333; text-decoration: none; } a:hover { color: #12b7f5; } img { border: none; } em { font-style: normal; } h1, h2, h3, h4, h5 { font-weight: normal; } .clearfloat:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .clearfloat { zoom: 1; } /* top */ .max1600 { max-width: 1600px; min-width: 1007px; margin: 0 auto; } .topbar { position: absolute; left: 0; top: 0; width: 100%; height: 150px; /*background: transparent url(../images/lineartop.png) repeat-x center top;*/ z-index: 900; } .toppic { max-width: 1170px; min-width: 980px; width: 80%; height: 75px; margin: 0 auto; } .toppic a:link, .toppic a:visited { /*color: #fff;*/ color: #333; } .topicfixed { position: fixed; left: 0; top: 0; background: #fff; border-bottom: 1px solid #f1f1f1; } .topicfixed a:link, .topicfixed a:visited { color: #333; } .topside { float: left; width: 59%; } .logoLink { float: left; display: block; width: 106px; height: 0px; overflow: hidden; padding-top: 76px; font-size: 0; background: transparent url(../images/imlogo_b.png) no-repeat left 15px; } .topNav { float: left; width: 450px; padding-left: 18px; } .topNav li { float: left; margin-left: 20px; } .topNav li a { float: left; padding: 0 20px; line-height: 75px; font-size: 1.125em; } .topNav li a:hover { background: #12b7f5; } .topNav li.current a { background: #12b7f5; } .topicfixed { height: 75px; } .topicfixed .logoLink { background-image: url(../images/imlogo_b.png); } /*.topicfixed li.current a{ background: none; color: #12b7f5;}*/ /*.topicfixed .topNav li a:hover{ background: none; color: #12b7f5;}*/ .topicfixed li.current a { background: none; } .topicfixed .topNav li a:hover { background: none; } .topTool { float: right; width: 320px; font-size: 0.875em; } .topTool a.barzc { float: left; width: 96px; height: 0; overflow: hidden; padding: 39px 0 0 0; margin: 18px 0 0 0; background: transparent url(../images/icons.png) no-repeat 0 -244px; text-align: center; line-height: 39px; color: #fff; } .topTool a.barzc:hover, .topicfixed a.barzc:hover { background: transparent url(../images/icons.png) no-repeat 0 -284px; color: #fff; } .topTool ul { float: right; height: 40px; padding-top: 6px; } .topTool li { float: right; margin-left: 30px; position: relative; line-height: 40px; } .topTool .login { height: 43px; line-height: 43px; } .topTool .login span { padding: 0 18px; color: #cecece; } /*.topTool a:hover{ color:#12b7f5;}*/ .flashData { float: right; line-height: 17px; text-align: right; letter-spacing: 0.04em; } .flashData a:hover { text-decoration: underline; } .topicfixed a.barzc { display: inline; } #loginInfo img { float: left; width: 25px; height: 25px; margin-top: 5px; vertical-align: middle; border-radius: 12px; cursor: pointer; } .loginPenel { display: none; position: absolute; right: 0; top: 30px; width: 120px; height: 85px; z-index: 100; } .loginPenel .trg { position: absolute; right: 8px; top: 4px; width: 10px; height: 7px; background: transparent url(../images/trg.png) no-repeat 0 0; font-size: 0; } .logindrop { width: 120px; height: 75px; margin-top: 10px; background: #fff; } .nick { width: 100px; height: 39px; overflow: hidden; margin: 0 auto; white-space: nowrap; line-height: 39px; text-align: center; text-overflow: ellipsis; } .lgout { width: 100%; border-top: 1px solid #d7d7d7; line-height: 35px; text-align: center; } .lgout a:link, .lgout a:visited { color: #333; } /* banner */ .crossbanenr { width: 100%; height: 778px; } .crossbanenr ul { position: relative; width: 100%; height: 100%; overflow: hidden; /*max-width: 1920px; */ min-width: 1007px; margin: 0 auto; } .crossbanenr li { position: absolute; left: 50%; top: 0; width: 1920px; height: 100%; margin: 0 0 0 -960px; display: none; z-index: 1; } .crossbanenr li:first-child { display: block; } .crossbanenr li.current { z-index: 2; } .crossbanenr li.pcqqbg { background: transparent url(../images/pcqq-bg.jpg) no-repeat center top; } .crossbanenr li.timbg { background: transparent url(../images/tim_bg_1.jpg) no-repeat center center; background-size: cover; left: 0; top: 0; width: 100%; margin: 0; } .crossbanenr li.mbqqbg { background: transparent url(../images/mb60-b.jpg) no-repeat center center; } .crossbanenr li.padqqbg { background: transparent url(../images/hdbig.jpg) no-repeat center top; } .crossbanenr li.watchbg { background: transparent url(../images/im_watch_b.jpg) no-repeat center top; } /****start 轮播banner*****/ /*.timbg{background-color:#2f9be9;}*/ .bn-content { position: relative; width: 60.885%; max-width: 1200px; min-width: 960px; margin: 0 auto; height: 100%; } .banner-down { margin-top: 20px; margin-left: 28px; } .bnleft { left: 0; } .bnright { right: 0; } .tim-content { position: relative; width: 98%; max-width: 1900px; min-width: 960px; margin: 0 auto; height: 100%; } .pcqqbg .bnleft { position: absolute; top: 28.138%; left: 3.6979%; } .pcqq-wenzi { background: url("../images/pc-ver894.png") no-repeat center top; width: 470px; height: 329px; } .pcqq-btn a { position: absolute; width: 386px; height: 76px; background: url("../images/pcqq-btn.png") no-repeat center top; } .pcqqbg .bnright { position: absolute; top: 19.456%; right: -60px; } .pcqq-fig { background: url("../images/pcqq-fig.png"); width: 571px; height: 685px; } .tim .bnleft { /*position: absolute;top:27.196%;left: 0;*/ padding-top: 6%; } .tim-wenzi { background: url("../images/logo.png") no-repeat center top; width: 297px; height: 167px; margin: 0 auto; } .tim-btn a { /*position: absolute;*/ display: block; width: 328px; height: 72px; background: url("../images/btn.png") no-repeat center top; margin: 2% auto 4%; } .tim-icon { background: url("../images/icon.png") no-repeat center top; width: 812px; height: 147px; margin: 0 auto; } .tim .bnright { position: absolute; top: 24.196%; right: -17.7604%; } .tim-fig { background: url("../images/tim-fig1.png"); width: 859px; height: 518px; } .tim-img { width: 100%; height: auto; /*left: 0.8%;*/ /*bottom: 0;*/ /*position: absolute;*/ } /****end 轮播banner*****/ .bncont { position: relative; width: 948px; height: 100%; margin: 0 auto; } .bntxt { position: absolute; left: -53px; top: 50%; width: 473px; height: 390px; margin-top: -195px; z-index: 10; } .bntxt h2 { width: 100%; height: 0; overflow: hidden; padding-top: 329px; text-indent: -9999px; } .bntxt a { display: block; width: 386px; height: 0; overflow: hidden; margin: 0 auto; padding-top: 76px; background: transparent url(../images/btn541b.png) no-repeat 0 0; text-align: center; line-height: 76; font-size: 30px; letter-spacing: 15px; } .bntxt a:link, .bntxt a:visited { color: #fff; } .bntxt a.bnzc { background-position: 0 0; } .bntxt a.bnzc:hover { background-position: 0 -77px; } .bntxt a.bnxz { background-position: 0 0; } .bntxt a.bnxz:hover { background-position: 0 -77px; } .pcqqbg .bntxt h2 { background: transparent url(../images/pc-ver894.png) no-repeat center top; } .mbqqbg .bntxt h2 { background: transparent url(../images/mbver636.png) no-repeat center top; } .padqqbg .bntxt h2 { background: transparent url(../images/hdtxt5.png) no-repeat 35px top; } .watchbg .bntxt h2 { background: transparent url(../images/watch_tit.png) no-repeat center 40px; } .pcqqbg .bnimg { position: absolute; right: -200px; top: 150px; width: 601px; height: 744px; background: transparent url(../images/pc68fig.png) no-repeat 0 0; z-index: 1; } .mbqqbg .bnimg { position: absolute; right: -168px; top: 130px; width: 820px; height: 977px; background: transparent url(../images/mb54fig.png) no-repeat 0 0; z-index: 1; } .circle { position: relative; width: 100%; height: 52px; margin-top: -52px; background: transparent url(../images/linearbot.png) repeat-x left top; text-align: center; z-index: 5; } .circle span { margin: 0 5px; padding: 2px 5px; background: transparent url(../images/nav.png) no-repeat center center; cursor: pointer; } .circle span.on { background-image: url(../images/navcur.png); } .content { width: 100%; } .content h1 { width: 100%; height: 0; overflow: hidden; padding-top: 280px; background: #fff url(../images/brand.png) no-repeat center top; } .activebg { position: relative; width: 100%; height: 600px; background: #fff; background-attachment: fixed; background-position: center 0; background-repeat: no-repeat; } .fisrtbg { background-image: url(../images/fisrtbg.jpg); } .secondbg { background-image: url(../images/avd.jpg); } .thirdbg { background-image: url(../images/blog.jpg); } .txtwrap p { font-size: 18px; letter-spacing: 0.12em; } .qfigure { width: 100%; height: 584px; background: #fff; } .qw960 { position: relative; width: 960px; height: 584px; margin: 0 auto; } .qcallAnimate { position: absolute; left: -32px; bottom: 0; width: 664px; height: 763px; background: transparent url(../images/pic1.png) no-repeat 0 0; } .qcall .txtwrap { position: absolute; right: 7px; top: 115px; width: 487px; } .qcall h2 { width: 100%; height: 0; overflow: hidden; padding-top: 135px; background: transparent url(../images/qcall_txt.png) no-repeat 0 0; } .qcall p { width: 100%; margin-bottom: 12px; line-height: 25px; text-align: right; opacity: 0.6; } .figs { width: 100%; padding-top: 44px; min-height: 77px; } .figs li { padding: 58px 0 0; color: #a0a0a0; font-size: 14px; text-align: center; } .qcall .figs { background: transparent url(../images/qcall_figs.png) no-repeat 190px 41px; } .qcall .figs li { float: right; border-left: 1px solid #e9e9e9; } .qcall .figs li.f01 { width: 80px; text-align: right; } .qcall .figs li.f02 { width: 109px; } .qcall .figs li.f03 { width: 156px; border: none; } .qcallWrap { position: relative; width: 251px; height: 446px; overflow: hidden; left: 57px; top: 72px; } .qcallWrap .pic1 { position: absolute; left: 0; top: 0; width: 255px; height: 450px; background: transparent url(../images/qcall_fig1.png) no-repeat 0 0; z-index: 2; opacity: 0; filter: Alpha(opacity=0); } .qcallbtn { position: absolute; left: 200px; top: 295px; width: 30px; height: 30px; background: transparent url(../images/point.png) no-repeat 0 0; z-index: 1; opacity: 0; filter: Alpha(opacity=0); } /*qfile*/ .qfileAnimate { position: absolute; right: -100px; bottom: 104px; width: 597px; height: 330px; background: transparent url(../images/pic2.png) no-repeat 0 0; } .qfile .txtwrap { position: absolute; left: 7px; top: 115px; width: 450px; } .qfile h2 { width: 100%; height: 0; overflow: hidden; padding-top: 140px; background: transparent url(../images/txt.png) no-repeat 0 0; } .qfile p { width: 90%; margin-bottom: 12px; padding-left: 5px; line-height: 25px; opacity: 0.6; } .qfile .figs { background: transparent url(../images/qfile_figs.png) no-repeat 7px 41px; } .qfile .figs li { float: left; border-right: 1px solid #e9e9e9; } .qfile .figs li.f01 { width: 94px; text-align: left; text-indent: 12px; } .qfile .figs li.f02 { width: 112px; } .qfile .figs li.f03 { width: 108px; border: none; } .qfileWrap { position: relative; left: 27px; top: 259px; width: 328px; height: 280px; } .qfileWrap .pic1 { position: absolute; left: 10px; top: 0; width: 275px; height: 83px; background: transparent url(../images/qfile_fig1.png) no-repeat 0 0; opacity: 0; } .qfileWrap .pic2 { position: absolute; right: 12px; top: 114px; width: 140px; height: 118px; background: transparent url(../images/qfile_fig2.png) no-repeat 0 0; opacity: 0; } .qfbar { position: absolute; left: 78px; top: 71px; width: 194px; height: 3px; overflow: hidden; background: #e6e6e6; opacity: 0; } .qfbar .bar { width: 30%; height: 3px; background: #5be10b; } /*qblog*/ .qblogAnimate { position: absolute; left: 88px; bottom: 0; width: 344px; height: 506px; background: transparent url(../images/pic3.png) no-repeat -30px 0; } .qblog .txtwrap { position: absolute; right: 7px; top: 120px; width: 495px; } .qblog h2 { width: 100%; height: 0; overflow: hidden; padding-top: 135px; background: transparent url(../images/qblog_txt.png) no-repeat 0 0; } .qblog p { width: 100%; margin-bottom: 12px; line-height: 25px; text-align: right; opacity: 0.6; } .qblog .figs { background: transparent url(../images/qblog_figs.png) no-repeat 228px 41px; } .qblog .figs li { float: right; border-left: 1px solid #e9e9e9; } .qblog .figs li.f01 { width: 80px; text-align: right; } .qblog .figs li.f02 { width: 105px; } .qblog .figs li.f03 { width: 106px; border: none; } .qblogWrap { position: relative; left: 0; top: 217px; width: 291px; height: 150px; } .qblogWrap div { position: absolute; top: 0; width: 150px; height: 150px; } .qblogWrap .pic1 { left: -122px; background: transparent url(../images/qblog_fig1.png) no-repeat 0 0; opacity: 0; } .qblogWrap .pic2 { left: 70px; background: transparent url(../images/qblog_fig2.png) no-repeat 0 0; opacity: 0; } .qblogWrap .pic3 { right: -119px; background: transparent url(../images/qblog_fig3.png) no-repeat 0 0; opacity: 0; } .morefigs { width: 100%; height: 87px; padding-top: 43px; border-top: 1px solid #e5e5e5 } .morefigs a { display: block; width: 332px; height: 0; overflow: hidden; padding-top: 45px; margin: 0 auto; background: transparent url(../images/morefigs.png) no-repeat 0 0; } a.knmore:link, a.knmore:visited { color: #12b7f5; } /* flash */ .flashBar { float: right; width: 67px; } .flashBar a { display: block; width: 67px; height: 0; overflow: hidden; padding-top: 67px; background: #000 url(../images/flahicons.png) no-repeat 0 0; border-bottom: 1px solid #333; } .flashBar a.close { background-position: 14px 14px; } .flashBar a.sharetozone { background-position: 14px -52px; } .flashBar a.sharetoweibo { background-position: 14px -120px; } .flashBar a.close:hover { background-position: -52px 14px; } .flashBar a.sharetozone:hover { background-position: -52px -52px; } .flashBar a.sharetoweibo:hover { background-position: -52px -120px; } .flashBox { float: left; background: url(../images/loading.gif) no-repeat 50% 40%; width: 910px; height: auto; } .overlay { display: none; position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; background-color: #000; opacity: 0.6; filter: Alpha(opacity=60); } #flashDiv { position: absolute; left: 50%; top: 47px; width: 978px; height: 721px; margin: 0 0 0 -489px; display: none; z-index: 10000; position: fixed; } .togame { clear: both; padding-right: 80px; height: 31px; text-align: right; } /* footer */ .newfoot { width: 100%; height: 348px; padding-top: 34px; background: #2a2a2a; font-size: 0.75em; } .newfoot a:link, .newfoot a:visited { color: #979797; } .newfoot a:hover { color: #cfcfcf; } .qmaps { width: 960px; height: 205px; margin: 0 auto; } .plats { float: left; width: 510px; padding-left: 8px; } .plats h3 { height: 50px; color: #666; font-size: 14px; } .plats a { float: left; padding-top: 65px; background: transparent url(../images/plats1.png) no-repeat 0 0; text-align: center; font-size: 14px; } .plats a:hover { color: #12b7f5; } .plats a.plmb { width: 80px; margin-right: 35px; background-position: 0px 0; } .plats a.plmb:hover { background-position: 0px -93px; } .plats a.plpc { width: 80px; margin-right: 30px; background-position: -105px 0; } .plats a.plpc:hover { background-position: -105px -93px; } .plats a.plmac { width: 84px; margin-right: 30px; background-position: -210px 0; } .plats a.plmac:hover { background-position: -210px -93px; } .plats a.plpad { width: 76px; background-position: -326px 0; } .plats a.plpad:hover { background-position: -326px -93px; } .map { float: left; } .map h3 { height: 25px; color: #666; font-size: 14px; } .map li { line-height: 22px; } .qac { width: 185px; } .qfaq { width: 175px; } .qlink { width: 80px; } .copyright { clear: both; width: 960px; margin: 0 auto; padding-top: 16px; border-top: 1px solid #666; line-height: 17px; text-align: center; color: #666; } .login_div { display: none; position: fixed; left: 50%; top: 50%; width: 622px; height: 368px; margin: -184px 0 0 -311px; z-index: 99999; } #pg2 .qfileWrap .pic1 { opacity: 1; -webkit-transform-origin: left; -moz-transform-origin: left; -o-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-animation: zoomIn 0.2s ease 0.1s; -moz-animation: zoomIn 0.2s ease 0.1s; -o-animation: zoomIn 0.2s ease 0.1s; animation: zoomIn 0.2s ease 0.1s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; } #pg2 .qfileWrap .qfbar { -webkit-animation: fadeIn 0.4s ease 0.3s; -moz-animation: fadeIn 0.4s ease 0.3s; -o-animation: fadeIn 0.4s ease 0.3s; animation: fadeIn 0.4s ease 0.3s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } #pg2 .qfileWrap .bar { -webkit-animation: widthall 1s ease 0.4s; -moz-animation: widthall 1s ease 0.4s; -o-animation: widthall 1s ease 0.4s; animation: widthall 1s ease 0.4s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } #pg2 .qfileWrap .pic2 { opacity: 1; -webkit-transform-origin: right; -moz-transform-origin: right; -o-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-animation: zoomIn 0.2s ease 1.5s; -moz-animation: zoomIn 0.2s ease 1.5s; -o-animation: zoomIn 0.2s ease 1.5s; animation: zoomIn 0.2s ease 1.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; } #pg3 .qblogWrap .pic1 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; } #pg3 .qblogWrap .pic2 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.5s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; } #pg3 .qblogWrap .pic3 { opacity: 1; -webkit-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -moz-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -o-animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.6s; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; } @keyframes fadeUp { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0px); } } @-moz-keyframes fadeUp { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0px); } } @-webkit-keyframes fadeUp { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0px); } } @-o-keyframes fadeUp { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0px); } } @-ms-keyframes fadeUp { 0% { opacity: 0; -ms-transform: translateY(-20px); } 100% { opacity: 1; -ms-transform: translateY(0px); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes widthall { 0% { width: 30%; } 100% { width: 100%; } } @-moz-keyframes widthall { 0% { width: 30%; } 100% { width: 100%; } } @-webkit-keyframes widthall { 0% { width: 30%; } 100% { width: 100%; } } @-o-keyframes widthall { 0% { width: 30%; } 100% { width: 100%; } } @-ms-keyframes widthall { 0% { width: 30%; } 100% { width: 100%; } } @keyframes zoomIn { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } } @-moz-keyframes zoomIn { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } } @-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(0); } 60% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-o-keyframes zoomIn { 0% { -o-transform: scale(0); } 90% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @-ms-keyframes zoomIn { 0% { -ms-transform: scale(0); } 60% { -ms-transform: scale(1.1); } 100% { -ms-transform: scale(1); } } @keyframes moveleft { 0% { transform: translateX(100%); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } @-moz-keyframes moveleft { 0% { transform: translateX(100%); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } @-webkit-keyframes moveleft { 0% { -webkit-transform: translateX(100%); opacity: 1; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @-o-keyframes moveleft { 0% { -o-transform: translateX(100%); opacity: 1; } 100% { -o-transform: translateX(0); opacity: 1; } } @-ms-keyframes moveleft { 0% { -ms-transform: translateX(100%); opacity: 1; } 100% { -ms-transform: translateX(0); opacity: 1; } } @keyframes click { 0% { transform: translateY(0px) translateX(0px); } 80% { transform: translateY(80px) translateX(-10px) scale(1); opacity: 1; } 90% { transform: translateY(80px) translateX(-10px) scale(1); opacity: 1; } 100% { transform: translateY(80px) translateX(-10px) scale(1.5); opacity: 0; } } @-moz-keyframes click { 0% { transform: translateY(0px) translateX(0px); } 80% { transform: translateY(80px) translateX(-10px) scale(1); opacity: 1; } 90% { transform: translateY(80px) translateX(-10px) scale(1); opacity: 1; } 100% { transform: translateY(80px) translateX(-10px) scale(1.5); opacity: 0; } } @-webkit-keyframes click { 0% { -webkit-transform: translateY(0px) translateX(0px); } 80% { -webkit-transform: translateY(80px) translateX(-10px) scale(1); opacity: 1; } 90% { -webkit-transform: translateY(80px) translateX(-10px) scale(1); opacity: 1; } 100% { -webkit-transform: translateY(80px) translateX(-10px) scale(1.5); opacity: 0; } } @-o-keyframes click { 0% { -o-transform: translateY(0px) translateX(0px); } 80% { -o-transform: translateY(-240px) translateX(-107px) scale(1); opacity: 1; } 90% { -o-transform: translateY(-240px) translateX(-107px) scale(1); opacity: 1; } 100% { -o-transform: translateY(-240px) translateX(-107px) scale(1.5); opacity: 0; } } @-ms-keyframes click { 0% { -ms-transform: translateY(0px) translateX(0px); } 80% { -ms-transform: translateY(-240px) translateX(-107px) scale(1); opacity: 1; } 90% { -ms-transform: translateY(-240px) translateX(-107px) scale(1); opacity: 1; } 100% { -ms-transform: translateY(-240px) translateX(-107px) scale(1.5); opacity: 0; } }
style.css (基础标签样式)
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1 } audio:not([controls]) { display: none; height: 0 } [hidden] { display: none } html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } html, button, input, select, textarea { font-family: sans-serif } body { margin: 0 } a:focus { outline: thin dotted } a:active, a:hover { outline: 0 } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .83em 0 } h3 { font-size: 1.17em; margin: 1em 0 } h4 { font-size: 1em; margin: 1.33em 0 } h5 { font-size: .83em; margin: 1.67em 0 } h6 { font-size: .67em; margin: 2.33em 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: 700 } blockquote { margin: 1em 40px } dfn { font-style: italic } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0 } mark { background: #ff0; color: #000 } p, pre { margin: 1em 0 } code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word } q { quotes: none } q:before, q:after { content: ''; content: none } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } dl, menu, ol, ul { margin: 1em 0 } dd { margin: 0 0 0 40px } menu, ol, ul { padding: 0 0 0 40px } nav ul, nav ol { list-style: none; list-style-image: none } img { border: 0; -ms-interpolation-mode: bicubic } svg:not(:root) { overflow: hidden } figure { margin: 0 } form { margin: 0 } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle } button, input { line-height: normal } button, select { text-transform: none } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; *overflow: visible } button[disabled], html input[disabled] { cursor: default } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px } input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } textarea { overflow: auto; vertical-align: top } table { border-collapse: collapse; border-spacing: 0 } a { text-decoration: none } img { display: block } ul, li { list-style: none; margin: 0; padding: 0 } .w1000 { width: 1000px; }