Revolver

Revolver
Revolver Animating with HTML5 + CSS3 Web Design Track - Intermediate Level
Assumes student has completed DASH projects 1 and 2. Provide a zip file download that contains: Final project looks like this !
“Unzip” the project folder by double-clicking on it. Check out what’s inside: Look inside the images folder Open revolver.html in Brackets (don’t worry, it’s supposed to be blank!)
Let’s start by giving revolver.html a basic HTML structure: <!DOCTYPE html> <html> <head> <title>Revolver</title> </head> <body> <div id="main"> </div> </body> </html>
Inside the <head>, add a <style> tag and set the body background: <style> body { background: url(“images/space.jpg”); background-size: cover; } </style> Turn on Live Preview → The background should fill the whole browser:
Now let’s add the sun. Inside the #main <div>, add an <img> tag with a class and a source: <img class=“sun” src=“images/sun.gif”> Then, add a second <img> tag to make the planet appear too. Live Preview →
Now let’s go back into <style> and add some CSS to center the #main <style> body { background: url(“images/space.jpg”); background-size: cover; } #main { margin: 0 auto; width: 800px; position: relative; } </style> Check out Live Preview →
Now let’s style the planet class <style> body { background: url(“images/space.jpg”); background-size: cover; } #main { margin: 0 auto; width: 800px; position: relative; } .planet { width: 70px; /* shrink (or grow) the planet */ position: absolute; left: 315px; /* tell it how far to move over from the left */ top: 350px; /* tell it how far to move down from the top */
Next, style .sun so it has the same position as .planet <style> body { background: url(“images/space.jpg”); background-size: cover; } #main { margin: 0 auto; width: 800px; position: relative; } .planet { width: 70px; /* shrinks the planet */ position: absolute; left: 315px; /* tells it how far to move over from the left */ top: 350px; /* tells it how far to move down from the top */ } .sun { position: ???; left: ???; top: ???;
Now we need to add the transform property and animation code to the .planet class .planet { width: 70px; position: absolute; left: 315px; top: 350px; transform: rotate(45deg) translateX(250px) rotate(-45deg); /* This is the vendor prefix code. It sets the animation type, speed, speed curve, and how many times it should run */ -webkit-animation: myOrbit 6s linear infinite; /* Chrome, Safari 5 */ -moz-animation: myOrbit 6s linear infinite; /* Firefox 5-15 */ -o-animation: myOrbit 6s linear infinite; /* Opera 12+ */ animation: myOrbit 6s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */ }
Last thing is to add @keyframes right before </style> (not inside .planet !) /* This is @keyframes. This code controls what the animation looks like */ @-webkit-keyframes myOrbit { from { -webkit-transform: rotate(0deg) translateX(250px) rotate(0deg); } to { -webkit-transform: rotate(360deg) translateX(250px) rotate(-360deg); } } @-moz-keyframes myOrbit { from { -moz-transform: rotate(0deg) translateX(250px) rotate(0deg); } to { -moz-transform: rotate(360deg) translateX(250px) rotate(-360deg); } } @-o-keyframes myOrbit { from { -o-transform: rotate(0deg) translateX(250px) rotate(0deg); } to { -o-transform: rotate(360deg) translateX(250px) rotate(-360deg); } } @keyframes myOrbit { from { transform: rotate(0deg) translateX(250px) rotate(0deg); } to { transform: rotate(360deg) translateX(250px) rotate(-360deg); } }

Check these out next

Revolver

Recomendados

Más contenido relacionado

Presentaciones para ti(20)

Destacado(13)

Similar a Revolver(20)

Último(20)

Revolver