Создайте индийский флаг с помощью HTML и CSS
В этой статье мы создадим анимированный флаг Индии с помощью HTML и CSS. Как мы знаем, наш индийский флаг имеет три цвета: шафрановый, белый и зеленый, а также колесо в центре белой части. Итак, давайте построим индийский флаг. Здесь мы также создадим стержень флага. Итак, сначала создайте div-оболочку (класс с именем wrapper), который содержит два класса div с именами stick и flag.
HTML
<div class = "wrapper"> <div class="stick"></div> <div class="flag"></div></div> |
Палочка и флаг должны быть встроенными, поэтому мы делаем свойство display обертки div гибким. И добавьте немного высоты, ширины, цвета фона, стилей границ на палку, а во флаг добавьте свойства высоты, ширины, тени блока, цвета фона и положения.
CSS
.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;} |
Пока это выглядит так:
Теперь создайте часть флага. Часть флага состоит из трех частей, поэтому создайте три блока div и классов с именами сверху, посередине и снизу.
HTML
<div class="wrapper"> <div class="stick"></div> <div class="flag"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div></div> |
Теперь добавьте свойство height и background-color к верхнему, среднему и нижнему элементам div.
CSS
.top { height: 60px; background-color: #ff9933}.middle { height: 60px; background-color: white}.bottom { height: 60px; background-color: green} |
Теперь наш флаг выглядит так:
Теперь пришло время создать колесо, так что колесо — это не что иное, как div внутри div, класс с именем middle. В колесе мы создаем класс из 12 элементов span с именем «line» .
HTML
<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> |
Для стилизации колеса, во-первых, мы должны точно центрировать колесо внутри среднего div, используя свойства flex. И создайте колесо div, добавив высоту, ширину, границу, радиус границы и положение. А также спроектируйте элементы span, добавив свойства высоты, ширины, положения, «слева», фона и т. Д. И поверните каждый элемент строки, используя селектор :nth-child(n) и свойство transform: rotate(angle), каждый поворот должен быть с разницей в 15 градусов.
CSS
.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)} |
Теперь наш полный индийский флаг выглядит так:
Добавьте несколько анимаций: До сих пор мы создали полный, но статичный флаг, теперь пришло время создать несколько анимаций. Здесь мы добавим две анимации, первую анимацию вращения колеса ss, а вторую — волновую анимацию.
Добавление анимации вращения колеса: чтобы добавить вращение колеса, мы используем свойство transform: rotate(angle), делая продолжительность анимации 10 секунд, функцию времени анимации линейную и запуская анимацию бесконечное количество раз.
CSS
.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); }} |
Теперь наш индийский флаг выглядит так:
Добавление волновой анимации: Теперь добавьте волновую анимацию. Для этой анимации мы создаем отдельный div и добавляем его в div с флагом (поскольку мы накладываем этот div только внутри div с флагом, а не в «палке»). Добавьте position: absolute, height и width со значением 100%, добавьте градиентное фоновое изображение и измените фоновые позиции на анимацию.
CSS
.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; }} |
Полный код: полный код HTML и CSS для создания индийского национального флага.
HTML
<!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> |