Crear bandera india usando HTML y CSS

En este artículo, diseñaremos una bandera animada de India utilizando HTML y CSS. Como sabemos que nuestra bandera india tiene tres colores azafrán, blanco y verde y también hay una rueda en el centro de la parte blanca. Así que construyamos la bandera india. Aquí también crearemos un palo de la bandera. Entonces, primero cree un contenedor div (clase llamada contenedor) que contenga dos clases div llamadas palo y bandera.

<div class = "wrapper">
    <div class="stick"></div>
      <div class="flag"></div>
</div>

El palo y la bandera deben estar en línea, por lo que hacemos que la propiedad de visualización del div de envoltura se flexione. Y agregue algunos estilos de altura, ancho, color de fondo, borde al palo, y en la bandera, agregue propiedades de altura, ancho, sombra de cuadro, color de fondo y posición.

.wrapper {
    display: flex;
}
 
.stick {
    height: 450px;
    width: 10px;
    background: black;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
 
.flag {
    width: 270px;
    height: 180px;
    box-shadow: 0px 0px 90px 1px #989;
    background-color: transparent;
    position: relative;
}

Hasta ahora se ve así:

Ahora diseña la parte de la bandera. La parte de la bandera está hecha de tres partes, así que haga tres divisiones y clases denominadas superior, media e inferior. 

<div class="wrapper">
    <div class="stick"></div>
    <div class="flag">
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
    </div>
</div>

Ahora agregue la propiedad height y background-color a los divs superior, medio e inferior.

.top {
    height: 60px;
    background-color: #ff9933
}
 
.middle {
    height: 60px;
    background-color: white
}
 
.bottom {
    height: 60px;
    background-color: green
}

Ahora nuestra bandera se ve así: 

Ahora es el momento de crear una rueda, por lo que la rueda no es más que un div dentro del div, clase llamada medio. En la rueda, creamos una clase de 12 elementos de intervalo llamada ‘línea’ . 

<div class="flag">
    <div class="top"></div>
    <div class="middle">
        <div class="wheel">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </div>
    </div>
    <div class="bottom"></div>
</div>

Para diseñar la rueda, primero tenemos que centrar perfectamente la rueda dentro del div medio usando propiedades de flexión. Y diseñe el div de la rueda agregando altura, ancho, borde, radio de borde, posición. Y también diseñe los elementos de tramo agregando las propiedades de altura, ancho, posición, ‘izquierda’, fondo, etc. Y gire cada elemento de línea usando el selector :nth-child(n) y transforme: propiedad de rotación (ángulo), cada rotación debe tener una diferencia de 15 grados.

.wheel {
    height: 43px;
    width: 43px;
    border: 1px solid darkblue;
    border-radius: 45px;
    position: relative;
    margin: 0 auto
}
 
.wheel .line {
    height: 100%;
    width: 1px;
    display: inline-block;
    position: absolute;
    left: 50%;
    background: darkblue;
}
 
.line:nth-child(1) {
    transform: rotate(15deg)
}
 
.line:nth-child(2) {
    transform: rotate(30deg)
}
 
.line:nth-child(3) {
    transform: rotate(45deg)
}
 
.line:nth-child(4) {
    transform: rotate(60deg)
}
 
.line:nth-child(5) {
    transform: rotate(75deg)
}
 
.line:nth-child(6) {
    transform: rotate(90deg)
}
 
.line:nth-child(7) {
    transform: rotate(105deg)
}
 
.line:nth-child(8) {
    transform: rotate(120deg)
}
 
.line:nth-child(9) {
    transform: rotate(135deg)
}
 
.line:nth-child(10) {
    transform: rotate(150deg)
}
 
.line:nth-child(11) {
    transform: rotate(165deg)
}
 
.line:nth-child(12) {
    transform: rotate(180deg)
}

Ahora nuestra bandera india completa se ve así:

Agregue algunas animaciones: Hasta ahora hemos creado una bandera completa pero estática, ahora es el momento de crear algunas animaciones. Aquí agregaremos dos animaciones, la primera animación de rotación de rueda ss y la segunda es animación de onda.

Adición de animación de rotación de la rueda: para agregar la rotación de la rueda, usamos la propiedad transformar: rotar (ángulo), haciendo que la duración de la animación sea de 10 segundos, la función de sincronización de la animación lineal y ejecutando la animación infinitas veces.

.wheel {
    animation-name: wheel;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-timing-function: linear;
}
 
@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Ahora nuestra bandera india se ve así:

Agregar animación de onda: ahora agregue la animación de onda. Para esta animación, creamos un div separado y lo agregamos al div de la bandera (porque superponemos este div solo dentro del div de la bandera, no en ‘palo’). Agregue posición: absoluto, alto y ancho establecidos en 100%, y agregue una imagen de fondo degradada y cambie las posiciones de fondo para animar.

.wave {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(
        128deg, rgba(89, 72, 21, 0) 39%,
        rgba(250, 245, 245, 0.8474025974025974)
        46%, rgba(89, 72, 21, 0) 53%);
    animation-name: wavy;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
@keyframes wavy {
    0% {
        background-position: -400px 0px,
        -400px 0px, -400px 0px, -400px 0px;
    }
    100% {
        background-position: 800px 0px,
        800px 0px, 800px 0px, 800px 0px;
    }
}

Código completo: el código completo de HTML y CSS para diseñar la bandera nacional india.
 

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="wrapper">
        <div class="stick"></div>
        <div class="flag">
            <div class="wave"></div>
            <div class="top"></div>
            <div class="middle">
                <div class="wheel">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="bottom"></div>
        </div>
    </div>
</body>
 
</html>

.wrapper {
      display: flex;
  }
 
  .stick {
      height: 450px;
      width: 10px;
      background: black;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
 
  .flag {
      width: 270px;
      height: 180px;
      box-shadow: 0px 0px 90px 1px #989;
      background-color: transparent;
      position: relative;
  }
 
  .top {
      height: 60px;
      background-color: #ff9933
  }
 
  .middle {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
 
  .bottom {
      height: 60px;
      background-color: green
  }
 
  .wheel {
      height: 43px;
      width: 43px;
      border: 1px solid darkblue;
      border-radius: 45px;
      position: relative;
      margin: 0 auto;
      animation-name: wheel;
      animation-iteration-count: infinite;
      animation-duration: 5s;
      animation-timing-function: linear;
  }
 
  .wheel .line {
      height: 100%;
      width: 1px;
      display: inline-block;
      position: absolute;
      left: 50%;
      background: darkblue;
  }
 
  .line:nth-child(1) {
      transform: rotate(15deg)
  }
 
  .line:nth-child(2) {
      transform: rotate(30deg)
  }
 
  .line:nth-child(3) {
      transform: rotate(45deg)
  }
 
  .line:nth-child(4) {
      transform: rotate(60deg)
  }
 
  .line:nth-child(5) {
      transform: rotate(75deg)
  }
 
  .line:nth-child(6) {
      transform: rotate(90deg)
  }
 
  .line:nth-child(7) {
      transform: rotate(105deg)
  }
 
  .line:nth-child(8) {
      transform: rotate(120deg)
  }
 
  .line:nth-child(9) {
      transform: rotate(135deg)
  }
 
  .line:nth-child(10) {
      transform: rotate(150deg)
  }
 
  .line:nth-child(11) {
      transform: rotate(165deg)
  }
 
  .line:nth-child(12) {
      transform: rotate(180deg)
  }
 
  @keyframes wheel {
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
  .wave{
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(
        128deg, rgba(89,72,21,0) 39%,
        rgba(250,245,245,0.8474025974025974)
        46%, rgba(89,72,21,0) 53%);
    animation-name: wavy;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
 
  @keyframes wavy {
     0%{
      background-position:
      -400px 0px, -400px 0px,
      -400px 0px,-400px 0px;
     }
     100%{
      background-position: 800px 0px,
      800px 0px, 800px 0px, 800px 0px;
     }
   }

Producción: