Untitled
unknown
plain_text
15 days ago
1.6 kB
3
Indexable
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; background-color: #000; } .image-container { width: 100vw; /* Full chiều rộng màn hình */ position: relative; overflow: hidden; min-height: 300px; /* Giữ kích thước khi ảnh chưa tải */ } .shimmer { width: 100%; height: 100%; /* Bằng với image-container để không có khoảng đen */ background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; position: absolute; top: 0; left: 0; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } img { width: 100%; height: auto; display: block; opacity: 0; transition: opacity 0.5s ease-in-out; } </style> </head> <body> $imagesHtml <script> document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll("img").forEach(img => { img.onload = function () { img.style.opacity = 1; img.previousElementSibling.style.display = "none"; }; }); }); </script> </body> </html>
Editor is loading...
Leave a Comment