Created
May 11, 2012 20:48
-
-
Save adamjgrant/2662319 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
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> | |
| <meta charset="UTF-8"> | |
| <title>Snap transition · CodePen</title> | |
| <style> | |
| body { | |
| background: black; | |
| color: white; | |
| } | |
| h1 { | |
| color: #181818; | |
| font-size: 120px; | |
| line-height: 1.0em; | |
| margin: 0; | |
| z-index: -1; | |
| position: absolute; | |
| } | |
| a { | |
| position: relative; | |
| z-index: 2; | |
| display: block; | |
| width: 60px; | |
| height: 60px; | |
| margin-left: -30px; | |
| margin-top: -30px; | |
| border-radius: 50%; | |
| float: left; | |
| -webkit-transition: background-color 2.0s; | |
| -moz-transition: background-color 3.0s; | |
| -ms-transition: background-color 3.0s; | |
| -o-transition: background-color 3.0s; | |
| transition: background-color 3.0s; | |
| } | |
| a:hover { | |
| -webkit-transition-duration: 0s; | |
| -moz-transition-duration: 0s; | |
| -ms-transition-duration: 0s; | |
| -o-transition-duration: 0s; | |
| transition-duration: 0s; | |
| } | |
| a:nth-of-type(12n+0):hover { background-color: hsl( 0, 100%, 50% ); } | |
| a:nth-of-type(12n+1):hover { background-color: hsl( 30, 100%, 50% ); } | |
| a:nth-of-type(12n+2):hover { background-color: hsl( 60, 100%, 50% ); } | |
| a:nth-of-type(12n+3):hover { background-color: hsl( 90, 100%, 50% ); } | |
| a:nth-of-type(12n+4):hover { background-color: hsl( 120, 100%, 50% ); } | |
| a:nth-of-type(12n+5):hover { background-color: hsl( 150, 100%, 50% ); } | |
| a:nth-of-type(12n+6):hover { background-color: hsl( 180, 100%, 50% ); } | |
| a:nth-of-type(12n+7):hover { background-color: hsl( 210, 100%, 50% ); } | |
| a:nth-of-type(12n+8):hover { background-color: hsl( 240, 100%, 50% ); } | |
| a:nth-of-type(12n+9):hover { background-color: hsl( 270, 100%, 50% ); } | |
| a:nth-of-type(12n+10):hover { background-color: hsl( 300, 100%, 50% ); } | |
| a:nth-of-type(12n+11):hover { background-color: hsl( 330, 100%, 50% ); } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Hover Hover Hover Hover Hover Hover Hover Hover Hover</h1> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| </body> | |
| </html> |
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
| <h1>Hover Hover Hover Hover Hover Hover Hover Hover Hover</h1> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> | |
| <a href="#"></a><a href="#"></a> |
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
| body { | |
| background: black; | |
| color: white; | |
| } | |
| h1 { | |
| color: #181818; | |
| font-size: 120px; | |
| line-height: 1.0em; | |
| margin: 0; | |
| z-index: -1; | |
| position: absolute; | |
| } | |
| a { | |
| position: relative; | |
| z-index: 2; | |
| display: block; | |
| width: 60px; | |
| height: 60px; | |
| margin-left: -30px; | |
| margin-top: -30px; | |
| border-radius: 50%; | |
| float: left; | |
| -webkit-transition: background-color 2.0s; | |
| -moz-transition: background-color 3.0s; | |
| -ms-transition: background-color 3.0s; | |
| -o-transition: background-color 3.0s; | |
| transition: background-color 3.0s; | |
| } | |
| a:hover { | |
| -webkit-transition-duration: 0s; | |
| -moz-transition-duration: 0s; | |
| -ms-transition-duration: 0s; | |
| -o-transition-duration: 0s; | |
| transition-duration: 0s; | |
| } | |
| a:nth-of-type(12n+0):hover { background-color: hsl( 0, 100%, 50% ); } | |
| a:nth-of-type(12n+1):hover { background-color: hsl( 30, 100%, 50% ); } | |
| a:nth-of-type(12n+2):hover { background-color: hsl( 60, 100%, 50% ); } | |
| a:nth-of-type(12n+3):hover { background-color: hsl( 90, 100%, 50% ); } | |
| a:nth-of-type(12n+4):hover { background-color: hsl( 120, 100%, 50% ); } | |
| a:nth-of-type(12n+5):hover { background-color: hsl( 150, 100%, 50% ); } | |
| a:nth-of-type(12n+6):hover { background-color: hsl( 180, 100%, 50% ); } | |
| a:nth-of-type(12n+7):hover { background-color: hsl( 210, 100%, 50% ); } | |
| a:nth-of-type(12n+8):hover { background-color: hsl( 240, 100%, 50% ); } | |
| a:nth-of-type(12n+9):hover { background-color: hsl( 270, 100%, 50% ); } | |
| a:nth-of-type(12n+10):hover { background-color: hsl( 300, 100%, 50% ); } | |
| a:nth-of-type(12n+11):hover { background-color: hsl( 330, 100%, 50% ); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment