.__captcha-parent { box-shadow: 0 0 11px 0 #999999; width: 316px; overflow: hidden; position: relative; z-index: 997; box-sizing: border-box; border-radius: 5px; padding: 8px; .captcha-box { height: 260px; width: 100%; position: relative; overflow: hidden; .loading { width: 120px; height: 20px; mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%; background: linear-gradient(#f7b645 0 0) 0 / 0% no-repeat #dddddd6b; animation: cartoon 1s infinite steps(6); margin: 120px auto; @keyframes cartoon { 100% { background-size: 120%; } } } .captcha { transform-style: preserve-3d; will-change: transform; transition-duration: 0.45s; transform: translateX(-100%); } } .slider-bottom { text-align: right; margin-top: 8px; display: flex; justify-content: flex-end; gap: 10px; .close-btn, .refresh-btn { width: 20px; height: 20px; background-repeat: no-repeat; cursor: pointer; } .close-btn { background-image: url("../images/icon.png"); background-position: 0 -14px; } .refresh-btn { background-image: url("../images/icon.png"); background-position: 0 -167px; } } .slider-move-shadow { animation: move-shadow 2s infinite; height: 100%; width: 5px; background-color: #fff; position: absolute; top: 0; left: 0; filter: opacity(0.5); box-shadow: 1px 1px 1px #fff; border-radius: 50%; } .captcha-slider-move-track-mask { border-width: 1px; border-style: solid; border-color: #00f4ab; width: 0; height: 32px; background-color: #a9ffe5; opacity: 0.5; position: absolute; top: -1px; left: -1px; border-radius: 5px; } @keyframes move-shadow { from { left: 0; } to { left: 289px; } } @import "./common/common.less"; @import "./slider/slider.less"; @import "./rotate/rotate.less"; @import "./concat/concat.less"; @import "./disable/disable.less"; @import "./image_click/image_click.less"; }