sliding-verify/dist/style.css

滑动验证码

.tips{height:37px;position:relative;text-align:center;z-index:10;overflow:hidden;box-sizing:border-box}.tips.inHover{overflow:inherit}.tips .imgs{opacity:0;z-index:1;position:absolute;bottom:35px;left:0;transition:.5s}.tips:before{position:relative;font-size:14px;z-index:10;box-sizing:border-box;line-height:35px;display:inline-block;width:100%;border:1px solid #333;color:#aaa;border-radius:5px;content:attr(data-placeholder)}.tips .trail{position:absolute;z-index:10;top:0px;bottom:0px;left:0px;border:1px solid;border-radius:5px}.tips .trail.move{border-color:#006bf8;background:#80b7ff}.tips .trail.ok{border-color:#35cdbd;background:#cef5ef}.tips .trail.error{border-color:#fd7a7d;background:#fee1e1}.tips .drag{box-sizing:border-box;position:absolute;z-index:10;top:0;width:37px;height:37px;border-radius:5px;border:1px solid #000;text-align:center;background:#fff;display:flex;justify-content:center;align-items:center;cursor:pointer}.tips .drag.move{border-color:#006bf8;background:#006bf8}.tips .drag.move .icon{fill:#fff}.tips .drag.ok{border-color:#35cdbd;background:#35cdbd}.tips .drag.ok .icon{fill:#fff}.tips .drag.error{background:#fd7a7d;border-color:#fd7a7d}.tips .drag.error .icon{fill:#fff}.tips .reload{position:absolute;z-index:10;font-size:80%;right:5px;top:5px;cursor:pointer}.tips.inHover .imgs{opacity:1;box-sizing:content-box;padding-bottom:20px}svg{width:1.2em;height:1.2em;line-height:35px;display:inline-block;vertical-align:-.15em;fill:currentColor;overflow:hidden}