Created
December 12, 2012 20:23
-
-
Save skopp/4271248 to your computer and use it in GitHub Desktop.
A CodePen by skopp. Twitter Logo Animation - >Animating twitter logo with css
>css carbon fibre background
>fun with css transformations {Twitter logo used from https://twitter.com/logo}
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
| <!--Inspired by | |
| http://codepen.io/wmora/pen/fEzux --> | |
| <html> | |
| <body> | |
| <div id="tweet"><a href="https:www.twitter.com/sauravtom">@SauravTom</a></div><br><br><br> | |
| <div id="scaler"> </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
| @import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500); | |
| body | |
| { | |
| background: | |
| radial-gradient(black 15%, transparent 16%) 0 0, | |
| radial-gradient(black 15%, transparent 16%) 8px 8px, | |
| radial-gradient(rgba(64,153,255,.1) 15%, transparent 20%) 0 1px, | |
| radial-gradient(rgba(64,153,255,.1) 15%, transparent 20%) 8px 9px; | |
| background-color:#282828; | |
| background-size:16px 16px; | |
| #background: -webkit-radial-gradient(circle, rgb(255,255,255), rgb(64,153,255)); | |
| font-family: 'Ubuntu', sans-serif; | |
| text-align:center; | |
| width:100%; | |
| } | |
| #tweet | |
| { | |
| background: rgb(255,255,255); | |
| border: 0.3em solid rgb(64,153,255); | |
| height:20px; | |
| width:100px; | |
| border-radius:10px; | |
| transition: all 1s ease; | |
| } | |
| #tweet:hover | |
| { | |
| border: 0.3em solid rgb(255,255,255); | |
| background: rgb(64,153,255); | |
| } | |
| #scaler | |
| { | |
| border: 0.3em solid rgb(64,153,255); | |
| border-radius:200px; | |
| display:inline-block; | |
| height:200px; | |
| transition: all 1s ease; | |
| width:200px; | |
| background: url('https://si0.twimg.com/a/1354824529/images/resources/twitter-bird-blue-on-white.png') no-repeat; | |
| #background-size: 200px 200px; | |
| #background-position: center top; | |
| background-size: 100% Auto; | |
| } | |
| #scaler:hover | |
| { | |
| transform:scale(1.6) | |
| rotate(-360deg); | |
| background: url('https://si0.twimg.com/a/1354824529/images/resources/twitter-bird-white-on-blue.png') no-repeat; | |
| border: 0.3em solid rgba(255,255,255, 0.9); | |
| background-size: 100% Auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment