Spaces:
Sleeping
Sleeping
body { | |
margin: 50px 0; | |
text-align: center; | |
font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif; | |
} | |
.inp { | |
border: 1px solid #cccccc; | |
border-radius: 2px; | |
padding: 0 10px; | |
width: 320px; | |
height: 40px; | |
font-size: 18px; | |
} | |
.btn { | |
display: inline-block; | |
box-sizing: border-box; | |
border: 1px solid #cccccc; | |
border-radius: 2px; | |
width: 100px; | |
height: 40px; | |
line-height: 40px; | |
font-size: 16px; | |
color: #666; | |
cursor: pointer; | |
background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%); | |
} | |
.btn:hover { | |
background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%) | |
} | |
#captcha { | |
width: 300px; | |
display: inline-block; | |
} | |
label { | |
vertical-align: top; | |
display: inline-block; | |
width: 120px; | |
text-align: right; | |
} | |
#text { | |
height: 42px; | |
width: 298px; | |
text-align: center; | |
border-radius: 2px; | |
background-color: #F3F3F3; | |
color: #BBBBBB; | |
font-size: 14px; | |
letter-spacing: 0.1px; | |
line-height: 42px; | |
} | |
#wait { | |
display: none; | |
height: 42px; | |
width: 298px; | |
text-align: center; | |
border-radius: 2px; | |
background-color: #F3F3F3; | |
} | |
.loading { | |
margin: auto; | |
width: 70px; | |
height: 20px; | |
} | |
.loading-dot { | |
float: left; | |
width: 8px; | |
height: 8px; | |
margin: 18px 4px; | |
background: #ccc; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
opacity: 0; | |
-webkit-box-shadow: 0 0 2px black; | |
-moz-box-shadow: 0 0 2px black; | |
-ms-box-shadow: 0 0 2px black; | |
-o-box-shadow: 0 0 2px black; | |
box-shadow: 0 0 2px black; | |
-webkit-animation: loadingFade 1s infinite; | |
-moz-animation: loadingFade 1s infinite; | |
animation: loadingFade 1s infinite; | |
} | |
.loading-dot:nth-child(1) { | |
-webkit-animation-delay: 0s; | |
-moz-animation-delay: 0s; | |
animation-delay: 0s; | |
} | |
.loading-dot:nth-child(2) { | |
-webkit-animation-delay: 0.1s; | |
-moz-animation-delay: 0.1s; | |
animation-delay: 0.1s; | |
} | |
.loading-dot:nth-child(3) { | |
-webkit-animation-delay: 0.2s; | |
-moz-animation-delay: 0.2s; | |
animation-delay: 0.2s; | |
} | |
.loading-dot:nth-child(4) { | |
-webkit-animation-delay: 0.3s; | |
-moz-animation-delay: 0.3s; | |
animation-delay: 0.3s; | |
} | |
@-webkit-keyframes loadingFade { | |
0% { | |
opacity: 0; | |
} | |
50% { | |
opacity: 0.8; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
@-moz-keyframes loadingFade { | |
0% { | |
opacity: 0; | |
} | |
50% { | |
opacity: 0.8; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
@keyframes loadingFade { | |
0% { | |
opacity: 0; | |
} | |
50% { | |
opacity: 0.8; | |
} | |
100% { | |
opacity: 0; | |
} | |
} |