Untitled
unknown
plain_text
2 years ago
2.8 kB
3
Indexable
<!DOCTYPE html> <html> <head> <style> .container { position: relative; height: 400px; overflow: hidden; } .wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0.4) 0%, rgba(0, 0, 255, 0) 100%); animation: waveAnimation 4s linear infinite; } @keyframes waveAnimation { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .box-container { position: relative; margin-top: 60px; } .box { width: 50px; height: 50px; margin: 5px; display: inline-block; background-color: blue; position: relative; } .line { position: absolute; width: 100%; height: 2px; background-color: black; bottom: -6px; left: 0; } </style> </head> <body> <div class="container"> <div class="wave"></div> <div class="box-container" id="container"></div> </div> <script> // Create the grid var container = document.getElementById('container'); for (var i = 0; i < 5; i++) { for (var j = 0; j < 10; j++) { var box = document.createElement('div'); box.className = 'box'; var line = document.createElement('div'); line.className = 'line'; box.appendChild(line); container.appendChild(box); } container.appendChild(document.createElement('br')); } // Function to generate a random color function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // Function to update box colors function updateColors() { var boxes = document.getElementsByClassName('box'); for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; box.style.backgroundColor = getRandomColor(); } } // Interval to update colors every 1 second setInterval(updateColors, 1000); // Wave effect animation var wave = document.createElement('div'); wave.className = 'wave'; container.appendChild(wave); </script> </body> </html>
Editor is loading...