Hello everyone make sure to stop by and introduce yourself and do check out our design and programming sections.
Visit the Den and get some free stuff!

You are not connected. Please login or register

CSS animations create your own galaxy with keyframes

View previous topic View next topic Go down  Message [Page 1 of 1]

george

avatar

Admin
Admin
Here is a sample code I made of a planet orbiting the sun using simple CSS transitions.

Here's how to build your own solar system Cool


Let's start and create an html document.

Code:

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
   
    <body>
        <!-- Right below is an image of the sun -->
        <img id="sun" src="http://goo.gl/PmbqZa">
       
        <!-- Insert the 'earth' on the next line -->
        <div id='earth-orbit'>
        <img id="earth" src="http://goo.gl/41IWnf">
        </div>
       
    </body>
</html>

Then we want to create the style.css document and save both the index and style.css to the same folder.

Here's what you do for your css animations.

Code:

html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;
   
    /* The universe is black */
    background-color: black;
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
   
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
    border-color: orange;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
}

#earth {
    /* Style your earth */
    position: absolute;
    top: 0;
    left: 50%;

    height: 50px;
    width: 50px;
    margin-left: -25px;
    margin-top: -25px;
}

#earth-orbit {
    /* For Section #2 */
    position: absolute;
    top: 50%;
    left: 50%;

    width: 500px;
    height: 500px;
    margin-top: -250px;
    margin-left: -250px;

    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
  -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;
}
@-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);
  }
}

See the code in action: https://jsfiddle.net/2pygo6zo/
See Final Result: https://jsfiddle.net/2pygo6zo/embedded/result/

#css #animation #keyframes


_________________
What do I do? Logos, Websites, Custom Graphics, Branding, mockups, and more.

My Portfolio - Blog - Shop
View user profile http://gareygraphics.com

View previous topic View next topic Back to top  Message [Page 1 of 1]

Share this topic!

URL Direct
BBcode
HTML
CSS animations create your own galaxy with keyframes

Permissions in this forum:
You cannot reply to topics in this forum