Scribd Logo
Upload

Welcome to Scribd!

  • 9 views

    Código en CSS Sobre Planetas

    Uploaded by

    Gabriel Navarro Salcedo

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Código en CSS Sobre Planetas

    Uploaded by

    Gabriel Navarro Salcedo
    9 views4 pages

    Original Title

    Código en CSS sobre Planetas

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    9 views4 pages

    Código en CSS Sobre Planetas

    Uploaded by

    Gabriel Navarro Salcedo

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 4

    Código en CSS:

    * { margin: 0 auto; paddign: 0; }


    @keyframes bola1 {
    from {transform: rotate(0deg); -o-transform: rotate(0deg);}
    to {transform: rotate(360deg); -o-transform: rotate(360deg);}
    }
    @-webkit-keyframes bola1 {
    from {-webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
    }
    body { background: black; }
    #cont { position: absolute; top: 0px; left: 400px;
    width: 700px; height: 600px; }

    #sol { width: 60px; height: 60px; background-color: yellow;border-radius:


    50%;
    position: absolute; left: 400px; top: 250px; }

    #mercurio { position: absolute; left: 430px; top: 220px; border-radius:


    50%;
    width: 12px; height: 12px; background-color: maroon;
    transform-origin: 0px 60px;
    animation-name: bola1;
    animation-duration: 4500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    -webkit-transform-origin: 0px 60px;


    -webkit-animation-name: bola1;
    -webkit-animation-duration: 4500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }

    #venus { position: absolute; left: 430px; top: 170px; border-radius: 50%;


    width: 30px; height: 30px; background-color: lime;
    transform-origin: 0px 110px;
    animation-name: bola1;
    animation-duration: 11s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    -webkit-transform-origin: 0px 110px;


    -webkit-animation-name: bola1;
    -webkit-animation-duration: 11s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }
    #tierra { position: absolute; left: 430px; top: 130px;border-radius: 50%;
    width: 32px; height: 32px; background-color: blue;
    transform-origin: 0px 150px;
    animation-name: bola1;
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-transform-origin: 0px 150px;
    -webkit-animation-name: bola1;
    -webkit-animation-duration: 18s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }

    #marte { position: absolute; left: 430px; top: 50px;border-radius: 50%;


    width: 18px; height: 18px; background-color: red;
    transform-origin: 0px 230px;
    animation-name: bola1;
    animation-duration: 34s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    -webkit-transform-origin: 0px 230px;


    -webkit-animation-name: bola1;
    -webkit-animation-duration: 34s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    }

    #ob_mercurio { position: absolute; left:376px; top: 226px;


    width: 108px; height: 108px;
    border: 1px solid white; border-radius: 50%;}

    #ob_venus { position: absolute; left:335px; top: 185px;


    width: 190px; height: 190px;
    border: 1px solid white; border-radius: 50% }

    #ob_tierra { position: absolute; left:296px; top: 146px;


    width: 268px; height: 268px;
    border: 1px solid white; border-radius: 50%; }

    #ob_marte { position: absolute; left:209px; top: 59px;


    width: 442px; height: 442px;
    border: 1px solid white; border-radius: 50%; }

    #texto { position: absolute; top: 0px; left: 0px;


    width: 400px; height: 700px; background-color: aqua; }
    #texto h1 { font:bold 24px arial; text-align: center;color: navy;
    padding: 10px; }
    #texto table { border: 4px double navy; width: 350px;
    border-collapse: collapse; text-align: center; }
    #texto td,#texto th { border: 1px solid navy; }
    #texto td { min-width: 70px; font: normal 12px arial; padding: 2px; }
    #texto th { font: bold 15px arial; }

    .mercurio { width: 12px; height: 12px; background-color: maroon;


    border-radius: 50%; }
    .venus { width: 30px; height: 30px; background-color: lime;
    border-radius: 50%; }
    .tierra { width: 32px; height: 32px; background-color: blue;
    border-radius: 50%;}
    .marte { width: 18px; height: 18px; background-color: red;
    border-radius: 50%; }
    Código HTML:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Los planetas</title>
    <link rel="stylesheet" type="text/css" href="planetas.css" media="all" />
    </head>
    <body>
    <div id="cont">
    <div id="mercurio"></div>
    <div id="venus"></div>
    <div id="tierra"></div>
    <div id="marte"></div>
    <div id="sol"></div>
    <div id="ob_mercurio"></div>
    <div id="ob_venus"></div>
    <div id="ob_tierra"></div>
    <div id="ob_marte"></div>
    </div>
    <div id="texto">
    <h1>Los planetas interiores</h1>
    <table align="center">
    <tr>
    <td>Planetas</td>
    <th>Mercurio</th>
    <th>Venus</th>
    <th>Tierra</th>
    <th>Marte</th>
    </tr>
    <tr>
    <th>Imagen</th>
    <td><div class="mercurio"></div></td>
    <td><div class="venus"></div></td>
    <td><div class="tierra"></div></td>
    <td><div class="marte"></div></td>
    </tr>
    <tr>
    <th>Redio del ecuador en km</th>
    <td>2.240</td>
    <td>6.052</td>
    <td>6.378</td>
    <td>3.397</td>
    </tr>
    <tr>
    <th>Distancia al sol (mill de km)</th>
    <td>58</td>
    <td>108</td>
    <td>150</td>
    <td>228</td>
    </tr>
    <tr>
    <th>Periodo de rotación</th>
    <td>58,6 dias</td>
    <td>-243 dias</td>
    <td>23,93 horas</td>
    <td>24,62 horas</td>
    </tr>
    <tr>
    <th>Órbita (dias)</th>
    <td>87,97</td>
    <td>224,7</td>
    <td>365,256</td>
    <td>686,98</td>
    </tr>
    <tr>
    <th>Inclinación del eje</th>
    <td>0,00 º</td>
    <td>177,36 º</td>
    <td>23,45 º</td>
    <td>25,19 º</td>
    </tr>
    <tr>
    <th>Inclinación orbital</th>
    <td>7,00 º</td>
    <td>3,39 º</td>
    <td>0,00 º</td>
    <td>1,85 º</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    You might also like