Created
July 1, 2012 05:42
-
-
Save f8lrebel/3027005 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
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> | |
| <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-top: -30px; | |
| margin-left: -30px; | |
| float: left; | |
| } | |
| a i { | |
| display: block; | |
| height: 100%; | |
| border-radius: 50%; | |
| -webkit-transform: scale3d(0.1, 0.1, 1); | |
| -moz-transform: scale(0.1); | |
| -ms-transform: scale(0.1); | |
| -o-transform: scale(0.1); | |
| transform: scale(0.1); | |
| -webkit-transition: -webkit-transform 1.5s; | |
| -moz-transition: -moz-transform 1.5s; | |
| -ms-transition: -ms-transform 1.5s; | |
| -o-transition: -o-transform 1.5s; | |
| transition: transform 1.5s; | |
| } | |
| a:hover i { | |
| -webkit-transform: scale3d(1, 1, 1); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); | |
| -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) i { background-color: hsl( 0, 100%, 50% ); } | |
| a:nth-of-type(12n+1) i { background-color: hsl( 30, 100%, 50% ); } | |
| a:nth-of-type(12n+2) i { background-color: hsl( 60, 100%, 50% ); } | |
| a:nth-of-type(12n+3) i { background-color: hsl( 90, 100%, 50% ); } | |
| a:nth-of-type(12n+4) i { background-color: hsl( 120, 100%, 50% ); } | |
| a:nth-of-type(12n+5) i { background-color: hsl( 150, 100%, 50% ); } | |
| a:nth-of-type(12n+6) i { background-color: hsl( 180, 100%, 50% ); } | |
| a:nth-of-type(12n+7) i { background-color: hsl( 210, 100%, 50% ); } | |
| a:nth-of-type(12n+8) i { background-color: hsl( 240, 100%, 50% ); } | |
| a:nth-of-type(12n+9) i { background-color: hsl( 270, 100%, 50% ); } | |
| a:nth-of-type(12n+10) i { background-color: hsl( 300, 100%, 50% ); } | |
| a:nth-of-type(12n+11) i { background-color: hsl( 330, 100%, 50% ); } | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| border-image: none !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Hover Hover Hover Hover Hover Hover Hover Hover Hover</h1> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/desandro/pen/snap-transition/4">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
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
| <h1>Hover Hover Hover Hover Hover Hover Hover Hover Hover</h1> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> | |
| <a href="#"><i></i></a><a href="#"><i></i></a> |
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
| 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-top: -30px; | |
| margin-left: -30px; | |
| float: left; | |
| } | |
| a i { | |
| display: block; | |
| height: 100%; | |
| border-radius: 50%; | |
| -webkit-transform: scale3d(0.1, 0.1, 1); | |
| -moz-transform: scale(0.1); | |
| -ms-transform: scale(0.1); | |
| -o-transform: scale(0.1); | |
| transform: scale(0.1); | |
| -webkit-transition: -webkit-transform 1.5s; | |
| -moz-transition: -moz-transform 1.5s; | |
| -ms-transition: -ms-transform 1.5s; | |
| -o-transition: -o-transform 1.5s; | |
| transition: transform 1.5s; | |
| } | |
| a:hover i { | |
| -webkit-transform: scale3d(1, 1, 1); | |
| -moz-transform: scale(1); | |
| -ms-transform: scale(1); | |
| -o-transform: scale(1); | |
| transform: scale(1); | |
| -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) i { background-color: hsl( 0, 100%, 50% ); } | |
| a:nth-of-type(12n+1) i { background-color: hsl( 30, 100%, 50% ); } | |
| a:nth-of-type(12n+2) i { background-color: hsl( 60, 100%, 50% ); } | |
| a:nth-of-type(12n+3) i { background-color: hsl( 90, 100%, 50% ); } | |
| a:nth-of-type(12n+4) i { background-color: hsl( 120, 100%, 50% ); } | |
| a:nth-of-type(12n+5) i { background-color: hsl( 150, 100%, 50% ); } | |
| a:nth-of-type(12n+6) i { background-color: hsl( 180, 100%, 50% ); } | |
| a:nth-of-type(12n+7) i { background-color: hsl( 210, 100%, 50% ); } | |
| a:nth-of-type(12n+8) i { background-color: hsl( 240, 100%, 50% ); } | |
| a:nth-of-type(12n+9) i { background-color: hsl( 270, 100%, 50% ); } | |
| a:nth-of-type(12n+10) i { background-color: hsl( 300, 100%, 50% ); } | |
| a:nth-of-type(12n+11) i { background-color: hsl( 330, 100%, 50% ); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment