.human-detection { position: relative; width: auto; height: auto; } .human-detection .preview { margin: auto; width: 480px; height: 640px; } .human-detection .graphs { position: absolute; top: 0; left: 0; z-index: 999; box-shadow: 0 0 14.4928rpx #CCC; background-color: rgba(0, 0, 0, 0.01); } @-webkit-keyframes flash-indicate { 0% { opacity: 0; } 50%, 75% { opacity: 0.85; } 78%, 100% { opacity: 0; } } @keyframes flash-indicate { 0% { opacity: 0; } 50%, 75% { opacity: 0.85; } 78%, 100% { opacity: 0; } } .human-detection .toggle-camera-wrapper { position: absolute; top: 32rpx; right: 32rpx; width: 64rpx; height: 64rpx; color: #fff; z-index: 9999; } .human-detection .toggle-camera-wrapper-hover { opacity: 0.65; } .human-detection .human-indicate-wrapper { position: absolute; top: 32rpx; right: 32rpx; width: 84rpx; height: 84rpx; color: #CCC; opacity: 0.85; } .human-detection .human-indicate-wrapper.active { color: #fda900; text-shadow: 0 0 4rpx rgba(1, 170, 247, 0.85); -webkit-animation: flash-indicate 1.3s infinite; animation: flash-indicate 1.3s infinite; } .human-detection .info-box { position: absolute; right: 32rpx; bottom: 32rpx; width: 160rpx; height: 60rpx; color: #FFF; line-height: 150%; font-size: 12px; z-index: 99999; } @-webkit-keyframes flash-border { 0% { box-shadow: 0 0 2rpx red; } 25% { box-shadow: 0 0 8rpx red; } 50% { box-shadow: 0 0 16rpx red; } 100% { box-shadow: 0 0 20rpx red; } } @keyframes flash-border { 0% { box-shadow: 0 0 2rpx red; } 25% { box-shadow: 0 0 8rpx red; } 50% { box-shadow: 0 0 16rpx red; } 100% { box-shadow: 0 0 20rpx red; } } .human-detection .body-range { position: absolute; top: 10%; left: 10%; z-index: 888; width: 80%; height: 80%; border: solid 1rpx red; border-radius: 10rpx; -webkit-animation: flash-border 1.5s infinite; animation: flash-border 1.5s infinite; }