Last active
July 2, 2025 03:49
-
-
Save jackstine/3d04daefcaee28488f18a0b471c6cf93 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Animated Striped Pillar</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 20px; | |
| min-height: 100vh; | |
| background: #222; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| font-family: Arial, sans-serif; | |
| } | |
| .pillar { | |
| width: 150px; | |
| height: 400px; | |
| position: relative; | |
| overflow: hidden; | |
| border: 3px solid #333; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| } | |
| .stripes { | |
| position: absolute; | |
| width: 200%; | |
| height: 200%; | |
| top: -50%; | |
| left: -50%; | |
| background: repeating-linear-gradient( | |
| 20deg, | |
| #ff0000 0px, | |
| #ff4500 15px, | |
| #ffa500 30px, | |
| #ffff00 45px, | |
| #32cd32 60px, | |
| #00bfff 75px, | |
| #4169e1 90px, | |
| #8a2be2 105px, | |
| #ff1493 120px, | |
| #ffffff 135px, | |
| #ff0000 150px | |
| ); | |
| animation: moveStripes 4s linear infinite; | |
| } | |
| @keyframes moveStripes { | |
| 0% { | |
| transform: translateY(0); | |
| } | |
| 100% { | |
| transform: translateY(150px); | |
| } | |
| } | |
| .label { | |
| position: absolute; | |
| bottom: -50px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| color: #fff; | |
| font-size: 14px; | |
| text-align: center; | |
| } | |
| h3 { | |
| margin-top: 60px; | |
| font-size: 48px; | |
| font-weight: bold; | |
| text-align: center; | |
| background: repeating-linear-gradient( | |
| 20deg, | |
| #ff0000 0px, | |
| #ff4500 15px, | |
| #ffa500 30px, | |
| #ffff00 45px, | |
| #32cd32 60px, | |
| #00bfff 75px, | |
| #4169e1 90px, | |
| #8a2be2 105px, | |
| #ff1493 120px, | |
| #ffffff 135px, | |
| #ff0000 150px | |
| ); | |
| background-size: 400% 400%; | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| animation: moveTextGradient 4s linear infinite; | |
| } | |
| @keyframes moveTextGradient { | |
| 0% { | |
| background-position: 0% 0%; | |
| } | |
| 100% { | |
| background-position: 100% 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="pillar"> | |
| <div class="stripes"></div> | |
| <div class="label">Rainbow Gradient Pillar</div> | |
| </div> | |
| <h3>this is the text</h3> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment