comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

Duda CSS

  • 0 Respuestas
  • 1097 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado deeps_vee

  • *
  • Underc0der
  • Mensajes: 7
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
« en: Noviembre 07, 2014, 11:11:32 pm »
Hola soy nuevo en estoy  y andaba viendo por la pagina codeacademy para intentar de aprender un poco de lenguajes de programación.
Bueno en un ejercicio que termine te ensañaba a hacer la tierra rodeando al sol.
Pero tuve curiosidad si le podia hacer una luna que se moviera con la tierra.
pero no logro saber como hacer que la orbita de la luna siga a la tierra les dejo el codigo
Código: [Seleccionar]
<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://recursostic.educacion.es/ciencias/biosfera/web/alumno/1ESO/planeta_habitado/imagenes/planetatierra.jpg">
       
       
        <div id="moon-orbit">
        <img id="moon" src="http://lroc.sese.asu.edu/assets/IMG/eightB-ef14459a40042dd3c41d4f823a6d7973.jpg">
        </div>
       
    </body>
</html>
y el css
Código: [Seleccionar]
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%;
    border-color: orange;
    border-width: 7px;
    border-style:solid;
    border-radius:50%;
    box-shadow: 0 0 264px red;
   
    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

#earth {
    /* Style your earth */
    position:absolute;
    top:0;
    left:50%;
    height:50px;
    width:60px;
    margin-left: -25px;
    margin-top: -25px;
    box-shadow: 0 0 500px blue;
}

#earth-orbit {
    /* For Section #2 */
    position:absolute;
    top:50%;
    left:50%;
    width:500px;
    height:500px;
    margin-top: -250px;
    margin-left:-250;
    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);
  }
}
#moon{
    position:absolute;
    height:20px;
    width:20px;
   
    }
#moon-orbit{
    position:absolute;
    top:30%;
    left:5%;
    width:75px;
    height:75px;
    margin-top: 250px;
    margin-left:250;
    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);
    }
}


y si si alguien podria explicarme bien como funciona esto ya que entendí maso menos lo suficiente para hacer mover la tierra pero no lo explicaba mucho la pagina ,igual ahora me voy a fijar en google haber si encuentro algo

-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);

Espero que me puedan ayudar,muchas gracias.
Perdón por mis horrores de ortografía que seguramente hay mucho porque no es mi fuerte.
 Nos leemos  :)

Ya conseguí arreglar el problema  pero gracias igual.
« Última modificación: Noviembre 07, 2014, 11:44:40 pm por deeps_vee »

 

¿Te gustó el post? COMPARTILO!



[SOLUCIONADO] Duda con " "

Iniciado por Krisium

Respuestas: 1
Vistas: 1807
Último mensaje Junio 10, 2010, 10:50:35 am
por Xa0s
[SOLUCIONADO] [Taller PHP] Duda taller php 2 ejercicio 3

Iniciado por arthusu

Respuestas: 4
Vistas: 2268
Último mensaje Agosto 05, 2011, 02:00:42 am
por arthusu
[SOLUCIONADO] [Taller PHP] Duda taller php 1 ejercicio 4

Iniciado por arthusu

Respuestas: 2
Vistas: 1710
Último mensaje Julio 18, 2011, 07:19:33 pm
por arthusu
[SOLUCIONADO][Taller PHP] Duda taller php 2 ejercicio 2

Iniciado por Only

Respuestas: 3
Vistas: 2040
Último mensaje Agosto 05, 2011, 09:48:09 pm
por Only
[SOLUCIONADO] Duda con Windows 7 de 32 bits & 64 bits

Iniciado por andrestoushit

Respuestas: 2
Vistas: 992
Último mensaje Marzo 15, 2016, 04:01:16 pm
por Lah-Vahn