Programación > Programación Web

Animaciones de caja y su contenido [HTML - CSS]

(1/1)

R3LI4NT:
Hi,
les traigo algunas animaciones que pueden usar en su sitio web, espero que sea de su agrado.

Animaciones de Caja

Rotación y Desplazamiento



Código HTML:


--- Código: Text ---<!DOCTYPE html><html><head>        <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Animaciones</title>    <link rel="stylesheet" href="css/animaciones.css"></head><body>        <div class="container">                <div class="rotacion">                        <h3>ROTACIÓN</h3>                </div>                <div class="des">                        <h3>DESPLAZAR</h3>                </div>        </div>  </body></html> 
Código CSS:


--- Código: CSS ---* {        margin: 0;        padding:0;        box-sizing: border-box;} .container {        display: flex;        justify-content: center;        align-items: center;        height: 90vh;} .rotacion {        background-color: red;        height: 150px;        width: 150px;        color: black;        display: flex;        justify-content: center;        align-items: center;        cursor: pointer;        border: 4px solid black;        animation-name: vuelta;        animation-duration: 5s;        animation-iteration-count: infinite;        animation-timing-function: linear;} .rotacion:hover {        animation-duration: 0s;        animation-iteration-count: inherit;}  @keyframes vuelta {        from {                transform: rotateZ(0deg);        }        to {                transform: rotateZ(360deg);        }}    .des {        background-color: green;        height: 150px;        width: 150px;        color: black;        display: flex;        justify-content: center;        align-items: center;        cursor: pointer;        border: 4px solid black;        animation-name: desplazar;        animation-duration: 2s;        animation-iteration-count: infinite;        animation-timing-function: linear;        margin-top: 500px;} .des:hover {        animation-duration: 0s;        animation-iteration-count: inherit;} @keyframes desplazar {        from {                transform: translateX(0%);        }        to {                transform:translateX(100%);        }}  

Animaciones del contenido dentro

Zoom, Rebote y Tambaleo



Código HTML:


--- Código: Text ---<!DOCTYPE html><html><head>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>3 Animaciones</title>        <link rel="stylesheet" href="css/z_r_t.css"></head><body>        <section class="animation">                <div class="animation_container">                        <div class="item">                                <span class="zoom">Zoom</span>                        </div>                        <div class="item">                                <span class="rebotar">Rebotar</span>                        </div>                        <div class="item">                                <span class="wobble">Tambaleo</span>                        </div>                </div>        </section> </body></html> 
Código CSS:


--- Código: CSS ---* {        margin:0;        padding: 0;        box-sizing: border-box;} body {        font-family: Impact;} .animation {        width: 100vw;        height: 100vh;        display: flex;        align-items: center;        justify-content: center;} .animation_container {        width: 700px;        margin: 0 auto;        display: grid;        grid-template-columns: repeat(3, 1fr);        grid-gap:1rem;} .item {        background-color: #1BB48F;        padding: 3rem;        color: white;        display: flex;        align-items: center;        justify-content: center;        border: 3px solid #0E7B61;        box-shadow: -3px 4px 5px black;} .item span {        animation-duration: 2.5s;        animation-fill-mode: both;        animation-iteration-count: infinite;        font-size: 2rem;        font-weight: bold;        text-shadow: 1px 1px 1px black;        } .item .zoom {        animation-name: zoom;} @keyframes zoom {        0% {transform: scale(1);}        50% {transform: scale(1.3);color: black;text-shadow: 1px 1px 1px white;}        100% {transform: scale(1); color: white;}}.item .rebotar {        animation-name: rebotar;} @keyframes rebotar {        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}        40% {transform: translateY(-30px);}        60% {transform: translateY(-15px);}} .item .wobble {        animation-name: wobble;        color: black;text-shadow: 1px 1px 1px white;    } @keyframes wobble {        0% {transform: translateX(0);}        15% {transform: translateX(-25%)rotate(-5deg);}        30% {transform: translateX(20%)rotate(3deg);}        45% {transform: translateX(-15%)rotate(-3deg);}        60% {transform: translateX(10%)rotate(2deg);}        75% {transform: translateX(-5%)rotate(-1deg);}        100% {transform: translateX(0%)}} 

NOTA: Para los que recién inician en HTML. Recuerden especificar la ruta de su hoja de estilos CSS <link rel="stylesheet" href="">

Saludos
#R3LI4NT

Navegación

[0] Índice de Mensajes

Ir a la versión completa