<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flashy Text Animation</title>
  <style>
    /* body {
      background-color: black;
      color: white;
      text-align: center;
      padding-top: 100px;
      font-family: Arial, sans-serif;
    }

    .flashy-text {
      font-size: 48px;
      font-weight: bold;
      animation: flashy 1s infinite;
    }

    @keyframes flashy {
      0%   { color: red;   text-shadow: 0 0 10px red; }
      25%  { color: yellow; text-shadow: 0 0 10px yellow; }
      50%  { color: lime;  text-shadow: 0 0 10px lime; }
      75%  { color: cyan;  text-shadow: 0 0 10px cyan; }
      100% { color: magenta; text-shadow: 0 0 10px magenta; }
    } */
  </style>
</head>
<body>
  <!-- <div class="flashy-text">🔥 Flashy Text Animation 🔥</div> -->


<style>
    .animated-border {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, black 50%, transparent 50%), 
                linear-gradient(90deg, black 50%, transparent 50%), 
                linear-gradient(0deg, black 50%, transparent 50%), 
                linear-gradient(0deg, black 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
    background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
    border-radius: 5px;
    padding: 10px;
    animation: dotted 30s linear infinite;
}

@keyframes dotted {
    to {
        background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
    }
}
</style>
<div class="animated-border">
Hello World;
</div>


<!-- 
<style>
.animated-border{
  width: 200px;
  height: 100px;
  border: 4px dotted #ff6600;
  animation: pulse 1s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    border-color: #ff6600;
  }
  50% {
    border-color: #ffcc00;
  }
  100% {
    border-color: #ff6600;
  }
}
</style>

<div class="animated-border"></div> -->








<!-- <style>
.animated-border {
  width: 200px;
  height: 100px;
  border: 3px dotted black;
  animation: dash 2s linear infinite;
}

@keyframes dash {
  0% {
    border-style: dotted;
    border-color: black;
  }
  50% {
    border-color: transparent;
  }
  100% {
    border-color: black;
  }
}
</style>

<div class="animated-border"></div> -->





<!-- <style>
.moving-dots {
  width: 200px;
  height: 100px;
  border: 5px solid transparent;
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='2' fill='black' /></svg>") 10 repeat;
  animation: moveDots 2s linear infinite;
}

@keyframes moveDots {
  0% {
    border-image-slice: 10;
    border-image-repeat: round;
    border-image-width: 5px;
  }
  100% {
    border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='2' fill='black' /></svg>");
  }
}
</style>

<div class="moving-dots"></div> -->

</body>
</html>
