代码
reset.css
一些通用的样式设置
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
style.css
具体的样式设置
.logo{
width: 192px;
height: 56px;
position: absolute;
left: 40px;
top: 20px;
z-index: 998;
background: url(../images/global.png) 0px 0px no-repeat;
}
.update-log{
width: 92px;
height: 30px;
position: absolute;
right: 130px;
top: 43px;
z-index: 998;
background: url(../images/global.png) 0 -56px no-repeat;
}
a.update-log:hover{
opacity: .8;
}
.platforms{
height: 95px;
width: 354px;
position: absolute;
left: 50%;
margin-left: -177px;
top: 15px;
z-index: 9999;
background-color: #fff;
}
.platforms a.win{
width: 92px;
height: 95px;
background: url(../images/global.png) 0 -116px no-repeat;
position: absolute;
bottom: 6px;
left: 0
}
.platforms a.win:hover{
background-position: -92px -116px;
}
.platforms a.win:active{
background-position: -184px -116px;
}
.platforms a.win.selected{
background-position: -276px -116px;
cursor: default;
/* 默认光标 */
}
.platforms a.mac{
width: 92px;
height: 95px;
background: url(../images/global.png) 0 -211px no-repeat;
position: absolute;
bottom: 6px;
left: 262px;
}
.platforms a.mac:hover{
background-position: -92px -211px;
}
.platforms a.mac:active{
background-position: -184px -211px;
}
.platforms a.mac.selected{
background-position: -276px -211px;
cursor: default;
}
.platforms a.ios{
width: 68px;
height: 95px;
background: url(../images/global.png) 0 -306px no-repeat;
position: absolute;
bottom: 6px;
left:184px;
}
.platforms a.ios:hover{
background-position: -68px -306px;
}
.platforms a.ios:active{
background-position: -136px -306px;
}
.platforms a.ios.selected{
background-position: -204px -306px;
cursor: default;
}
.platforms a.android{
width: 72px;
height: 95px;
background: url(../images/global.png) 0 -401px no-repeat;
position: absolute;
bottom: 6px;
left:102px;
}
.platforms a.android:hover{
background-position: -72px -401px;
}
.platforms a.android:active{
background-position: -144px -401px;
}
.platforms a.android.selected{
background-position: -216px -401px;
cursor: default;
}
.down{
width: 196px;
height: 48px;
position: absolute;
left: 50%;
bottom: 23px;
margin-left: -98px;
z-index: 999;
/* display:none; */
}
.down a{
background: url(../images/global.png) no-repeat;
/* display: none; */
position: absolute;
}
.down .win,.down .android{
width: 196px;
height: 48px;
left: 0;
top: 0;
background-position: 0 -592px;
}
.down .win:hover,.down .android:hover{
background-position: -196px -592px;
}
.down .win:active,.down .android:active{
background-position: -392px -592px;
}
.down .mac{
width: 196px;
height: 48px;
left: 0;
top: 0;
background-position: 0 -640px;
}
.down .mac:hover{
background-position: -196px -640px;
}
.down .mac:active{
background-position: -392px -640px;
}
.down .ios{
width: 196px;
height: 48px;
left: 20px;
top: 0;
margin: 0 auto;
background-position: 0 -496px;
}
.down .ios:hover{
background-position: -196px -496px;
}
.down .ios:active{
background-position: -392px -496px;
}
.down.win,.down.android,.down.ios,.down.mac{
display:block;
}
.down.win .win{
display: block;
}
.down.android .android{
display: block;
}
.down.android .android.soon{
background-position: 0 -470px;
cursor: default;
}
.down.ios .ios{
display: block;
}
.down.mac .mac{
display: block;
}
.indexes{
width: 12px;
height: 160px;
position: absolute;
right: 20px;
top: 50%;
margin-top: -80px;
z-index: 999;
}
.indexes span{
display: block;
overflow: hidden;
border-radius: 12px;
width: 10px;
height: 10px;
background-color: #cfe6ff;
margin-top: 15px;
cursor: default;
}
.indexes span.current{
width: 10px;
height: 10px;
border: none; /*none相当于solid一项不渲染,0的话是边框宽度为0 */
background-color: #4fa4ff;
}
.line{
width: 100%;
height: 1px;
overflow: hidden;
background-color: #4fa4ff;
position: absolute;
left: 0;
top: 50%;
margin-top: 210px;
}
.line.other{
top: 100px;
margin: 0;
}
.stage{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.stage .elem{
position: absolute;
left: 50%;
top: 50%;
}
.stage .scene{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
}
.stage a:hover{
opacity: .8;
}
.stage .anim{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0
}
.s0 .win,.s0 .mac,.s0 .ios,.s0 .android{
/* display: none; */
position:absolute;
width:100%;
height:100%;
z-index:10;
}
.s0 .win .elem{
background-image: url(../images/s0_win.png);
background-repeat: no-repeat;
}
.s0 .win .elem.display{
width: 452px;
height: 347px;
background-position: 0 0;
margin: -130px 0 0 -226px;
z-index: 1;
opacity:0;
animation: winDisplay 0.67s ease-in-out normal both;
}
@keyframes winDisplay{
0%{ transform: scale(0.95);
opacity:0;}
100%{ transform: scale(1);
opacity:1;
}
}
.s0 .win .elem.lamp{
width: 304px;
height: 379px;
background-position:-452px 0;
margin: -168px 0 0 -490px;
z-index: 2;
opacity:0;
animation: winLamp 1s ease-in-out normal both;
}
@keyframes winLamp{
0%{ transform: translateX(-200px);
opacity:0;}
100%{ transform: translateX(0px);
opacity:1;
}
}
.s0 .win .elem.cup{
width: 61px;
height: 66px;
background-position:-756px -150px;
margin: 110px 0 0 310px;
z-index: 2;
animation: winCup 1.2s ease-in-out normal both;
}
@keyframes winCup{
0%{ transform: translateY(-190px);
opacity:0;}
100%{ transform: translateY(0px);
opacity:1;
}
}
.s0 .win .elem.brush{
width: 77px;
height: 150px;
background-position:-756px 0;
margin: -20px 0 0 420px;
z-index: 2;
animation: winBrush 1s ease-in-out normal both;
}
@keyframes winBrush{
0%{ transform: translateY(-170px);
opacity:0;}
100%{ transform: translateY(0px);
opacity:1;
}
}
.s0 .win a.download{
width: 196px;
height: 48px;
position: absolute;
left: 50%;
top: 50%;
margin: 250px 0 0 -99px;
background-position: 0 -592px;
}
.s0 .win a.download:hover{
background-position: -196px -592px;
}
.s0 .win a.download:active{
background-position: -392px -592px;
}
.s0 .win .desc{
width: 300px;
overflow: hidden;
text-align: center;
line-height: 24px;
font-size: 14px;
color: #a2c5ff;
position: absolute;
left: 50%;
top: 50%;
margin: 310px 0 0 -150px;
}
.s0 .win .desc a{
color: #a2c5ff;
text-decoration: underline;
}
.s0 .win .desc a:hover{
opacity: .9;
}
.s0 .copyright{
width: 100%;
height: 24px;
line-height: 24px;
text-align: center;
color: #CED4DA;
font-family: verdana;
position: absolute;
bottom: 10px;
left: 0;
font-size: 12px;
z-index: 0;
}
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/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<a href="" class="logo"></a>
<!-- a标签划过会默认变成小手 -->
<a class="update-log" href=""></a>
<div class="platforms">
<a hidefocus="true" href="" class="win selected" data-platform="win"></a>
<!-- hidefocus隐藏聚焦,鼠标点击超链接时不会出现虚线框 -->
<a hidefocus="true" href="" class="mac" data-platform="mac"></a>
<a hidefocus="true" href="" class="ios" data-platform="ios"></a>
<a hidefocus="true" href="" class="android" data-platform="android"></a>
</div>
<div class="down">
<a hidefocus="true" href="" class="win"></a>
<a hidefocus="true" href="" class="mac"></a>
<a hidefocus="true" href="" class="ios"></a>
<a hidefocus="true" href="" class="android"></a>
</div>
<div class="indexes">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="line" style="top: 50%; margin-top: 210px;"></div>
<div class="stage">
<div class="scene s0" style="display: block; opacity: 1;">
<div class="win" style="display: block; opacity: 1;">
<div class="elem display" style="opacity: 1; transform: scale(1);"></div>
<div class="elem lamp" style="opacity: 1; transform: translateX(0px);"></div>
<div class="elem cup" style="opacity: 1; transform: translateY(0px);"></div>
<div class="elem brush" style="opacity: 1; transform: translateY(0px);"></div>
<a hidefocus="true" href="http://down1.xinshuru.com/installer/win/PalmInput_Setup.exe" class="download" style="opacity: 1;"></a>
<!--div class="desc"><a href="http://down.xinshuru.com/tool/PalmInputSkinEditor_2.0.0.0.exe">皮肤编辑器下载</a><br>适用于XP/win7/win8/win10 <br>版本:V2.7.0.1696<br>更新日期:2018/02/08</div-->
</div>
<div class="mac">
<div class="elem display"></div>
<div class="elem tree"></div>
<div class="elem snow"></div>
<div class="elem snowman"></div>
<div class="wp">
<div class="elem c1"></div>
<div class="elem c2"></div>
<div class="elem c3"></div>
<div class="elem c4"></div>
<div class="elem x1"></div>
<div class="elem x2"></div>
<div class="elem x3"></div>
</div>
<a hidefocus="true" href="" class="download"></a>
<div class="desc">适用于Mac OS X10.6及以上 版本:V1.1<br>更新日期:2015/08/12</div>
</div>
<div class="ios">
<div class="elem display"></div>
<div class="elem tree"></div>
<div class="elem balloon-big"></div>
<div class="elem balloon-small"></div>
<div class="elem signs"></div>
<div class="elem bird"></div>
<div class="qrcode">
<img src="./手心输入法_files/qrcode.png" alt=""><div class="text">iPhone手机 扫一扫即可下载</div>
</div>
<a hidefocus="true" href="https://appsto.re/cn/DSd96.i" class="download" target="_blank"></a>
<div class="desc">适用于iOS 8.0及以上 版本:V2.1<br>更新日期:2015/10/08</div>
</div>
<div class="android">
<div class="elem display"></div>
<div class="elem planet"></div>
<div class="elem bubbles"></div>
<div class="elem meteorites"></div>
<div class="qrcode">
<img src="./手心输入法_files/qrcode(1).png" alt=""><div class="text">android手机 扫一扫即可下载</div>
</div>
<a hidefocus="true" href="http://down.xinshuru.com/installer/android/PalmInput_2.3.0.986_1001.apk" class="download"></a>
<div class="desc">适用于Android2.1及以上 <br>版本:V2.3.0.982<br>更新日期:2017/04/23</div>
</div>
<div class="copyright" style="opacity: 1;">Copyright©2014-2017 xinshuru.com All Rights Reserved 京ICP证14021817号</div>
</div>
</div>
</body>
</html>