I saw this cool, animated Android logo using CSS3 and I decided to try my hand at it before watching the tutorial (i.e. without cheating).
Here's the final result!
Inspiration: http://thecodeplayer.com/walkthrough/css3-android-logo
Created
April 20, 2016 18:13
-
-
Save seerocode/b324cb86f97b9423edaea0ecca136ac5 to your computer and use it in GitHub Desktop.
CSS3 Android Logo Replica
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
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <div class="android-top"> | |
| <div class="left-ant"></div> | |
| <div class="right-ant"></div> | |
| <div class="android-head"></div> | |
| </div> | |
| <div class="android-body"></div> | |
| <div class="left-arm"></div> | |
| <div class="right-arm"></div> | |
| <div class="left-leg"></div> | |
| <div class="right-leg"></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
| div { | |
| margin: 0 auto; | |
| } | |
| .left-ant { | |
| background: #a4c639; | |
| width: 6px; | |
| height: 50px; | |
| border-radius: 200px 200px 0 0; | |
| left: -50px; | |
| bottom: -60px; | |
| position: relative; | |
| transform: rotate(-20deg); | |
| } | |
| .right-ant { | |
| background: #a4c639; | |
| width: 6px; | |
| height: 50px; | |
| border-radius: 200px 200px 0 0; | |
| right: -50px; | |
| bottom: -10px; | |
| position: relative; | |
| transform: rotate(20deg); | |
| } | |
| .android-head { | |
| background: #a4c639; | |
| width: 220px; | |
| height: 110px; | |
| border-radius: 200px 200px 0 0; | |
| background: -webkit-radial-gradient(circle, white 15%, #a4c639 1%); | |
| background: -o-radial-gradient(circle, white 15%, #a4c639 1%); | |
| background: -moz-radial-gradient(circle, white 15%, #a4c639 1%); | |
| background: radial-gradient(circle, white 11%, #a4c639 1%); | |
| background-size: 110px 120px; | |
| } | |
| .android-body { | |
| background: #a4c639; | |
| width: 220px; | |
| height: 190px; | |
| border-radius: 0 0 10% 10%; | |
| margin-top: 10px; | |
| } | |
| .left-arm { | |
| background: #a4c639; | |
| width: 50px; | |
| height: 150px; | |
| left: -145px; | |
| top: -190px; | |
| position: relative; | |
| border-radius: 60px 60px 60px 60px; | |
| transition: all .1s ease; | |
| -webkit-transition: all .1s ease; | |
| transform-origin: top right; | |
| -webkit-transform-origin: top right; | |
| } | |
| .left-arm:hover { | |
| transform: rotate(10deg); | |
| -webkit-transform: rotate(10deg); | |
| width: 50px; | |
| height: 150px; | |
| } | |
| .right-arm { | |
| background: #a4c639; | |
| width: 50px; | |
| height: 150px; | |
| right: -145px; | |
| top: -340px; | |
| position: relative; | |
| border-radius: 60px 60px 60px 60px; | |
| transition: all .1s ease; | |
| -webkit-transition: all .1s ease; | |
| transform-origin: top left; | |
| -webkit-transform-origin: top left; | |
| } | |
| .right-arm:hover { | |
| transform: rotate(-10deg); | |
| -webkit-transform: rotate(-10deg); | |
| width: 50px; | |
| height: 150px; | |
| } | |
| .left-leg { | |
| background: #a4c639; | |
| width: 50px; | |
| height: 70px; | |
| left: -40px; | |
| top: -300px; | |
| position: relative; | |
| border-radius: 0 0 60px 60px; | |
| } | |
| .right-leg { | |
| background: #a4c639; | |
| width: 50px; | |
| height: 85px; | |
| right: -40px; | |
| top: -385px; | |
| position: relative; | |
| border-radius: 0 0 60px 60px; | |
| } | |
| .android-top { | |
| transition: all .1s ease; | |
| -webkit-transition: all .1s ease; | |
| transform-origin: bottom left; | |
| -webkit-transform-origin: bottom left; | |
| width: 220px; | |
| } | |
| .android-top:hover { | |
| transform: rotate(-5deg); | |
| -webkit-transform: rotate(-5deg); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment