Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: R3LI4NT en Abril 10, 2021, 04:25:09 am

Título: Animaciones de caja y su contenido [HTML - CSS]
Publicado por: R3LI4NT en Abril 10, 2021, 04:25:09 am
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

(https://imagizer.imageshack.com/img922/589/BXTQA2.gif)

Código HTML:

Código: Text
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Animaciones</title>
  7.     <link rel="stylesheet" href="css/animaciones.css">
  8. </head>
  9. <body>
  10.         <div class="container">
  11.                 <div class="rotacion">
  12.                         <h3>ROTACIÓN</h3>
  13.                 </div>
  14.                 <div class="des">
  15.                         <h3>DESPLAZAR</h3>
  16.                 </div>
  17.         </div>
  18.  
  19.  
  20. </body>
  21. </html>
  22.  

Código CSS:

Código: CSS
  1. * {
  2.         margin: 0;
  3.         padding:0;
  4.         box-sizing: border-box;
  5. }
  6.  
  7. .container {
  8.         display: flex;
  9.         justify-content: center;
  10.         align-items: center;
  11.         height: 90vh;
  12. }
  13.  
  14. .rotacion {
  15.         background-color: red;
  16.         height: 150px;
  17.         width: 150px;
  18.         color: black;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.         cursor: pointer;
  23.         border: 4px solid black;
  24.         animation-name: vuelta;
  25.         animation-duration: 5s;
  26.         animation-iteration-count: infinite;
  27.         animation-timing-function: linear;
  28. }
  29.  
  30. .rotacion:hover {
  31.         animation-duration: 0s;
  32.         animation-iteration-count: inherit;
  33. }
  34.  
  35.  
  36. @keyframes vuelta {
  37.         from {
  38.                 transform: rotateZ(0deg);
  39.         }
  40.         to {
  41.                 transform: rotateZ(360deg);
  42.         }
  43. }
  44.  
  45.  
  46.  
  47.  
  48. .des {
  49.         background-color: green;
  50.         height: 150px;
  51.         width: 150px;
  52.         color: black;
  53.         display: flex;
  54.         justify-content: center;
  55.         align-items: center;
  56.         cursor: pointer;
  57.         border: 4px solid black;
  58.         animation-name: desplazar;
  59.         animation-duration: 2s;
  60.         animation-iteration-count: infinite;
  61.         animation-timing-function: linear;
  62.         margin-top: 500px;
  63. }
  64.  
  65. .des:hover {
  66.         animation-duration: 0s;
  67.         animation-iteration-count: inherit;
  68. }
  69.  
  70. @keyframes desplazar {
  71.         from {
  72.                 transform: translateX(0%);
  73.         }
  74.         to {
  75.                 transform:translateX(100%);
  76.         }
  77. }
  78.  
  79.  


Animaciones del contenido dentro

Zoom, Rebote y Tambaleo

(https://imagizer.imageshack.com/img923/3848/XTnwTl.gif)

Código HTML:

Código: Text
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>3 Animaciones</title>
  7.         <link rel="stylesheet" href="css/z_r_t.css">
  8. </head>
  9. <body>
  10.         <section class="animation">
  11.                 <div class="animation_container">
  12.                         <div class="item">
  13.                                 <span class="zoom">Zoom</span>
  14.                         </div>
  15.                         <div class="item">
  16.                                 <span class="rebotar">Rebotar</span>
  17.                         </div>
  18.                         <div class="item">
  19.                                 <span class="wobble">Tambaleo</span>
  20.                         </div>
  21.                 </div>
  22.         </section>
  23.  
  24. </body>
  25. </html>
  26.  

Código CSS:

Código: CSS
  1. * {
  2.         margin:0;
  3.         padding: 0;
  4.         box-sizing: border-box;
  5. }
  6.  
  7. body {
  8.         font-family: Impact;
  9. }
  10.  
  11. .animation {
  12.         width: 100vw;
  13.         height: 100vh;
  14.         display: flex;
  15.         align-items: center;
  16.         justify-content: center;
  17. }
  18.  
  19. .animation_container {
  20.         width: 700px;
  21.         margin: 0 auto;
  22.         display: grid;
  23.         grid-template-columns: repeat(3, 1fr);
  24.         grid-gap:1rem;
  25. }
  26.  
  27. .item {
  28.         background-color: #1BB48F;
  29.         padding: 3rem;
  30.         color: white;
  31.         display: flex;
  32.         align-items: center;
  33.         justify-content: center;
  34.         border: 3px solid #0E7B61;
  35.         box-shadow: -3px 4px 5px black;
  36. }
  37.  
  38. .item span {
  39.         animation-duration: 2.5s;
  40.         animation-fill-mode: both;
  41.         animation-iteration-count: infinite;
  42.         font-size: 2rem;
  43.         font-weight: bold;
  44.         text-shadow: 1px 1px 1px black;
  45.        
  46. }
  47.  
  48. .item .zoom {
  49.         animation-name: zoom;
  50. }
  51.  
  52. @keyframes zoom {
  53.         0% {transform: scale(1);}
  54.         50% {transform: scale(1.3);color: black;text-shadow: 1px 1px 1px white;}
  55.         100% {transform: scale(1); color: white;}
  56. }
  57. .item .rebotar {
  58.         animation-name: rebotar;
  59. }
  60.  
  61. @keyframes rebotar {
  62.         0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  63.         40% {transform: translateY(-30px);}
  64.         60% {transform: translateY(-15px);}
  65. }
  66.  
  67. .item .wobble {
  68.         animation-name: wobble;
  69.         color: black;text-shadow: 1px 1px 1px white;   
  70. }
  71.  
  72. @keyframes wobble {
  73.         0% {transform: translateX(0);}
  74.         15% {transform: translateX(-25%)rotate(-5deg);}
  75.         30% {transform: translateX(20%)rotate(3deg);}
  76.         45% {transform: translateX(-15%)rotate(-3deg);}
  77.         60% {transform: translateX(10%)rotate(2deg);}
  78.         75% {transform: translateX(-5%)rotate(-1deg);}
  79.         100% {transform: translateX(0%)}
  80. }
  81.  


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
Título: Re:Animaciones de caja y su contenido [HTML - CSS]
Publicado por: Juanete65 en Junio 15, 2021, 02:07:01 am
Es impresionante lo que puedes lograr con css, me alegra mucho este foro.
_________________________________
Trabajo en la Consultoría Salesforce (https://freewayconsulting.com/consultoria-salesforce/), soy programador S.r
Título: Re:Animaciones de caja y su contenido [HTML - CSS]
Publicado por: R3LI4NT en Junio 15, 2021, 04:02:44 am
¡Tú lo has dicho! a pesar de que CSS no sea un lenguaje de programación, es increíble lo que se puede llegar hacer con él, hasta se puede dibujar con CSS.

PD: Bienvenido al foro.