html,body { margin: 0; } .skeleton { position: absolute; left: 0; top: 0; right: 0; left: 0; height: 100%; width: 100%; display: flex; flex-direction: column; } .skeleton-item { background-image: linear-gradient(45deg, #D8D8D8 20%, #e6e6e6 37%, #D8D8D8 63%); background-size: 400% 100%; background-position: 100% 50%; border-radius: 4px; animation: skeleton-animation 1.4s ease infinite; } .skeleton-player { padding-top: 56.25%; background: #D2D2D2; } .skeleton-detail { flex: 1; background: #F6F6F6; } .skeleton-detail .skeleton-detail-info { padding: 16px; display: flex; } .skeleton-detail-info .skeleton-detail-info__avatar { width: 40px; height: 40px; margin-right: 10px; } .skeleton-detail-info .skeleton-detail-info__des__one { width: 96px; height: 17px; margin-bottom: 12px; } .skeleton-detail-info .skeleton-detail-info__des__two { width: 158px; height: 10px; } .skeleton-detail-role { padding: 17px; display: flex; justify-content: space-between; border-top: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; } .skeleton-detail-role .skeleton-detail-role-item { width: 55px; height: 13px; } .skeleton-detail-introduce { padding: 24px 16px 0 16px; } .skeleton-detail-introduce-item { margin-bottom: 24px; } .skeleton-detail-introduce-item:nth-child(1) { width: 80%; height: 30px; } .skeleton-detail-introduce-item:nth-child(2) { width: 98%; height: 20px; } .skeleton-detail-introduce-item:nth-child(3) { width: 65%; height: 20px; } .skeleton-detail-introduce-item:nth-child(4) { width: 98%; height: 20px; } .skeleton-detail-introduce-item:nth-child(5) { width: 80%; height: 20px; } @keyframes skeleton-animation { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }