|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<style> |
|
|
html, body { margin: 0; padding: 0; height: 100%; background: transparent; display: flex; justify-content: center; align-items: center; } |
|
|
|
|
|
.skeleton { |
|
|
background: #e0e0e0; |
|
|
animation: pulse 1.5s infinite; |
|
|
border-radius: 8px; |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.banner { |
|
|
width: calc(min(100vw - 45px, 841px)); |
|
|
height: auto; |
|
|
max-height: 512px; |
|
|
aspect-ratio: 16/9; |
|
|
} |
|
|
|
|
|
@keyframes pulse { 0% { opacity: 0.6; } 100% { opacity: 0.9; } } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<script> |
|
|
const skeleton = document.createElement('div'); |
|
|
skeleton.className = 'skeleton banner'; |
|
|
document.body.appendChild(skeleton); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
