Untitled

avatar
unknown
plain_text
2 years ago
2.4 kB
3
Indexable
<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Waves and Color Changing Effects</title>
  <style>
    .waves {
      width: 200px;
      height: 200px;
      background-color: #000;
      position: relative;
    }
    
    .light {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.2);
      animation: waves 2s infinite;
    }
    
    .box-container {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      margin-top: 20px;
    }
    
    .box {
      width: 30px;
      height: 30px;
      margin: 5px;
      background-color: rgb(0, 0, 0);
      animation: color-change 2s infinite;
    }
    
    @keyframes waves {
      0% {
        box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
      }
      50% {
        box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.9);
      }
      100% {
        box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
      }
    }
    
    @keyframes color-change {
      0% {
        background-color: rgb(0, 0, 0);
      }
      50% {
        background-color: rgb(255, 255, 255);
      }
      100% {
        background-color: rgb(0, 0, 0);
      }
    }
  </style>
</head>
<body>
  <div class="waves">
    <div class="light"></div>
  </div>
  
  <div class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // Randomly change the color of the boxes
      setInterval(function() {
        $(".box").each(function() {
          var randomColor = 'rgb(' +
            Math.floor(Math.random() * 256) + ',' +
            Math.floor(Math.random() * 256) + ',' +
            Math.floor(Math.random() * 256) + ')';
          $(this).css('background-color', randomColor);
        });
      }, 2000);
    });
  </script>
</body>
</html>
Editor is loading...