Created
May 20, 2016 03:32
-
-
Save craigmj/6dc6a9dd86d3c7219fdfcc8dffef2271 to your computer and use it in GitHub Desktop.
This file contains 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> | |
| <head> | |
| <title>The Rainbow</title> | |
| <style> | |
| body { | |
| background-color: #333; | |
| font-weight: bold; | |
| font-size: 64px; | |
| color: white; | |
| } | |
| .blink { | |
| animation-duration: 0.6s; | |
| animation-name: blink; | |
| animation-iteration-count: infinite; | |
| } | |
| @keyframes blink { | |
| from { | |
| opacity: 100; | |
| } | |
| 49.9% { | |
| opacity: 100; | |
| } | |
| 50% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| .rainbow { | |
| border-bottom: 1px solid white; | |
| } | |
| .rainbow{ | |
| animation-duration: 0.6s; | |
| animation-name: rainbow; | |
| animation-iteration-count: infinite; | |
| } | |
| @keyframes rainbow { | |
| from { | |
| color: #442299; | |
| border-bottom: 1px solid #442299; | |
| } | |
| 5% { | |
| color: #f80c12; | |
| border-bottom: 1px solid #f80c12; | |
| } | |
| 11% { | |
| color: #ee1100; | |
| border-bottom: 1px solid #ee1100; | |
| } | |
| 16% { | |
| color: #ff3311; | |
| border-bottom: 1px solid #ff3311; | |
| } | |
| 22% { | |
| color: #ff4422; | |
| border-bottom: 1px solid #ff4422; | |
| } | |
| 27% { | |
| color: #ff6644; | |
| border-bottom: 1px solid #ff6644; | |
| } | |
| 33% { | |
| color: #ff9933; | |
| border-bottom: 1px solid #ff9933; | |
| } | |
| 38% { | |
| color: #feae2d; | |
| border-bottom: 1px solid #feae2d; | |
| } | |
| 44% { | |
| color: #ccbb33; | |
| border-bottom: 1px solid #ccbb33; | |
| } | |
| 50% { | |
| color: #d0c310; | |
| border-bottom: 1px solid #d0c310; | |
| } | |
| 55% { | |
| color: #aacc22; | |
| border-bottom: 1px solid #aacc22; | |
| } | |
| 61% { | |
| color: #69d025; | |
| border-bottom: 1px solid #69d025; | |
| } | |
| 66% { | |
| color: #22ccaa; | |
| border-bottom: 1px solid #22ccaa; | |
| } | |
| 72% { | |
| color: #12bdb9; | |
| border-bottom: 1px solid #12bdb9; | |
| } | |
| 77% { | |
| color: #11aabb; | |
| border-bottom: 1px solid #11aabb; | |
| } | |
| 83% { | |
| color: #4444dd; | |
| border-bottom: 1px solid #4444dd; | |
| } | |
| 88% { | |
| color: #3311bb; | |
| border-bottom: 1px solid #3311bb; | |
| } | |
| 94% { | |
| color: #3b0cbd; | |
| border-bottom: 1px solid #3b0cbd; | |
| } | |
| 100% { | |
| color: #442299; | |
| border-bottom: 1px solid #442299; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>We fondly remember <span class="blink">the blink</span>. Alas, 'tis no more.</p> | |
| <p>Behold the future: <span class="rainbow">THE RAINBOW.</span></p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment