Create animated-rainbow-border.html

https://gist.github.com/simonw/2e56ee84e7321592f79ceaed2e81b0a9
simonw · Nov 3, 2024 · 99021c5 · 99021c5
1 parent 5f72442
commit 99021c5
Showing 1 changed file with 146 additions and 0 deletions.
diff --git a/animated-rainbow-border.html b/animated-rainbow-border.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      margin: 0;
+      background: #1a1a1a;
+    }
+
+    .rainbow-box {
+      position: relative;
+      width: 300px;
+      height: 200px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #2a2a2a;
+      border-radius: 10px;
+    }
+
+    .rainbow-box::before {
+      content: '';
+      position: absolute;
+      top: -3px;
+      left: -3px;
+      right: -3px;
+      bottom: -3px;
+      background: linear-gradient(
+        45deg,
+        #ff0000,
+        #ff8000,
+        #ffff00,
+        #00ff00,
+        #00ffff,
+        #0000ff,
+        #8000ff,
+        #ff0080,
+        #ff0000
+      );
+      background-size: 200% 200%;
+      border-radius: 12px;
+      z-index: -1;
+      filter: blur(6px);
+      opacity: 0;
+      transform: scale(0.95);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .rainbow-box.animated::before {
+      opacity: 1;
+      transform: scale(1);
+      animation: gradient 1.5s ease infinite,
+                pulse 2s ease-in-out infinite;
+    }
+
+    .rainbow-box::after {
+      content: '';
+      position: absolute;
+      inset: 2px;
+      background: #2a2a2a;
+      border-radius: 8px;
+      z-index: 0;
+    }
+
+    .content {
+      color: white;
+      font-family: system-ui, sans-serif;
+      font-size: 24px;
+      text-align: center;
+      position: relative;
+      z-index: 1;
+    }
+
+    .toggle-button {
+      padding: 12px 24px;
+      font-size: 16px;
+      color: white;
+      background: #444;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .toggle-button:hover {
+      background: #555;
+      transform: translateY(-2px);
+    }
+
+    .toggle-button:active {
+      background: #333;
+      transform: translateY(0px);
+    }
+
+    @keyframes gradient {
+      0% {
+        background-position: 0% 50%;
+      }
+      50% {
+        background-position: 100% 50%;
+      }
+      100% {
+        background-position: 0% 50%;
+      }
+    }
+
+    @keyframes pulse {
+      0% {
+        opacity: 1;
+        filter: blur(6px) brightness(1.2);
+      }
+      50% {
+        opacity: 0.8;
+        filter: blur(5px) brightness(1);
+      }
+      100% {
+        opacity: 1;
+        filter: blur(6px) brightness(1.2);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="rainbow-box">
+    <div class="content">Rainbow Border</div>
+  </div>
+  <button class="toggle-button" onclick="toggleAnimation()">Start Animation</button>
+
+  <script>
+    function toggleAnimation() {
+      const box = document.querySelector('.rainbow-box');
+      const button = document.querySelector('.toggle-button');
+
+      box.classList.toggle('animated');
+      button.textContent = box.classList.contains('animated') ? 
+        'Stop Animation' : 'Start Animation';
+    }
+  </script>
+</body>
+</html>