/*手势事件*/ .yb-player-center-value { font-size: 18px; padding: 20px 10px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.5); color: #fff; } .yb-player-rate { position: absolute; top: 10%; left: 50%; padding: 5px 15px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 14px; transform: translateX(-50%); display: flex; align-items: center; } .yb-player-rate-icon { display: flex; align-items: center; } .yb-player-rate-icon i { width: 0; height: 0; border-left: 10px solid #fff; border-right: 10px solid transparent; border-bottom: 5px solid transparent; border-top: 5px solid transparent; animation: arrowMove 1s infinite linear; margin-right: -5px; } .yb-player-rate-icon i:nth-child(0) { animation-delay: 0s; } .yb-player-rate-icon i:nth-child(1) { animation-delay: 0.3s; } .yb-player-rate-icon i:nth-child(2){ animation-delay: 0.5s; } @keyframes arrowMove { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } /*字幕*/ .yb-player-subtitle-text { position: absolute; left: 0; width: 100%; box-sizing: border-box; display: flex; justify-content: center; padding: 0 5%; } .yb-player-subtitle-loading { position:absolute; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,.5); color:#fff;bottom: 50px; font-size: 18px; padding: 5px 20px; } /*弹幕过滤*/ .yb-player-filter-item { display: flex; align-items: center; margin-top: 5px; } .yb-player-filter-item-type { padding: 2px 5px; background-color: var(--color-warning); font-size: 12px; color: #fff; margin-right: 10px; border-radius: 5px; } .yb-player-filter-item-content { font-size: 14px; color: #eee; flex: 1; } .yb-player-filter-item button { background-color: var(--color-error); font-size: 14px; color: #fff; border: none; }