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; } }