Created
May 11, 2012 20:48
-
-
Save adamjgrant/2662320 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