Created
April 18, 2014 17:15
-
-
Save GleasonK/11054758 to your computer and use it in GitHub Desktop.
A simple way to use CSS to create an animated atomic orbital logo
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
| <html lang="en-US"> | |
| <head> | |
| <!-- <link href="CSSGist.css" rel="stylesheet" type="text/css"> --> | |
| <style> | |
| #orbit-case{ | |
| width: 500px; | |
| height:500px; | |
| } | |
| #orbitX, #orbitY, #orbitZ { | |
| position: absolute; | |
| top: 10px; | |
| left:10px; | |
| margin: auto; | |
| width: 250px; | |
| height: 250px; | |
| border-color: #2c3c82; | |
| border-radius: 50%; | |
| color: #3e51a4; | |
| } | |
| #orbitX p, #orbitY p, #orbitZ p { | |
| margin: 0px 0 0 75px; | |
| color: #34489e; | |
| font-size: 25px; | |
| font-family: "Rockwell", "Times New Roman", monospace; | |
| } | |
| #orbitX { | |
| border-width: 3px; | |
| border-style: dotted; | |
| } | |
| #orbitY { | |
| border-width: 3px; | |
| border-style: double; | |
| } | |
| #orbitZ { | |
| border-width: 2px; | |
| border-style: groove; | |
| } | |
| /* Animation */ | |
| #orbitX { | |
| -webkit-animation: spin-right 10s linear infinite; | |
| -moz-animation: spin-right 10s linear infinite; | |
| -ms-animation: spin-right 10s linear infinite; | |
| -o-animation: spin-right 10s linear infinite; | |
| animation: spin-right 10s linear infinite; | |
| } | |
| #orbitY { | |
| -webkit-animation: spinX 10s linear infinite; | |
| -moz-animation: spinX 10s linear infinite; | |
| -ms-animation: spinX 10s linear infinite; | |
| -o-animation: spinX 10s linear infinite; | |
| animation: spinX 10s linear infinite; | |
| } | |
| #orbitZ { | |
| -webkit-animation: spinY 10s linear infinite; | |
| -moz-animation: spinY 10s linear infinite; | |
| -ms-animation: spinY 10s linear infinite; | |
| -o-animation: spinY 10s linear infinite; | |
| animation: spinY 10s linear infinite; | |
| } | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #center { | |
| position: absolute; | |
| top: 67px; | |
| left:67px; | |
| margin:auto; | |
| width: 125px; | |
| height: 125px; | |
| border-width: 8px; | |
| border-style: solid; | |
| border-color: #3e51a4; | |
| border-radius: 50%; | |
| box-shadow: 0 0 60px #4f88cf; | |
| } | |
| #center p { | |
| margin: 25px 0 0 22px; | |
| color: #3e51a4; | |
| font-size: 60px; | |
| font-family: "Rockwell", "Times New Roman", monospace; | |
| } | |
| @-webkit-keyframes spin-left { | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| -moz-transform: rotate(360deg); | |
| -ms-transform: rotate(360deg); | |
| -o-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes spin-left { | |
| 100% { | |
| -webkit-transform: rotate(-360deg); | |
| -moz-transform: rotate(-360deg); | |
| -ms-transform: rotate(-360deg); | |
| -o-transform: rotate(-360deg); | |
| transform: rotate(-360deg); | |
| } | |
| } | |
| @-webkit-keyframes spin-right { | |
| 100% { | |
| -webkit-transform: rotate(-360deg); | |
| -moz-transform: rotate(-360deg); | |
| -ms-transform: rotate(-360deg); | |
| -o-transform: rotate(-360deg); | |
| transform: rotate(-360deg); | |
| } | |
| } | |
| @keyframes spin-right { | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| -moz-transform: rotate(360deg); | |
| -ms-transform: rotate(360deg); | |
| -o-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @-webkit-keyframes spinX { | |
| 100% { | |
| -webkit-transform: rotateY(360deg); | |
| -moz-transform: rotateY(360deg); | |
| -ms-transform: rotateY(360deg); | |
| -o-transform: rotateY(360deg); | |
| transform: rotateY(360deg); | |
| } | |
| } | |
| @keyframes spinX { | |
| 100% { | |
| -webkit-transform: rotateY(360deg); | |
| -moz-transform: rotateY(360deg); | |
| -ms-transform: rotateY(360deg); | |
| -o-transform: rotateY(360deg); | |
| transform: rotateY(360deg); | |
| } | |
| } | |
| @-webkit-keyframes spinY { | |
| 100% { | |
| -webkit-transform: rotateX(360deg); | |
| -moz-transform: rotateX(360deg); | |
| -ms-transform: rotateX(360deg); | |
| -o-transform: rotateX(360deg); | |
| transform: rotateX(360deg); | |
| } | |
| } | |
| @keyframes spinY { | |
| 100% { | |
| -webkit-transform: rotateX(360deg); | |
| -moz-transform: rotateX(360deg); | |
| -ms-transform: rotateX(360deg); | |
| -o-transform: rotateX(360deg); | |
| transform: rotateX(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <!-- PAGE CONTENT --> | |
| <body id = "main-body" > | |
| <div id = "page-content"> | |
| <div style="width:100px;"> | |
| <div style="position:relative; margin-left:50px;"> <!-- Change this value to move whole logo --> | |
| <div style="display:static; position:relative; overflow:hidden; width:300px; height: 300px"> | |
| <div id="center"><p>KG</p></div> | |
| <div id="orbitX"> | |
| </div> | |
| <div id="orbitY"> | |
| <p style="margin: 0 0 0 90px;">Kevin</p> | |
| </div> | |
| <div id="orbitZ"> | |
| <p style="margin: 25px 0 0 75px;">Gleason</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment