Привет👨‍💻, с возвращением.

В этом блоге мы создадим красивый анимационный проект, используя только HTML и CSS. Этот проект является частью моего «Полного курса анимации CSS3», и я предполагаю, что вы являетесь разработчиком CSS среднего уровня для создания этого проекта.

⛳ Свойства анимации CSS3, которые я использовал в этом проекте:

  • CSS-преобразования
  • 3D-преобразования
  • CSS-переходы
  • Анимация
  • Пользовательская функция синхронизации (ключевые кадры)

Итак, вы взволнованы, чтобы построить этот проект? Я тоже. Начнем 🏒

🏗 Определение структуры вертолета с помощью HTML

Давайте определим контейнер в элементе main под названием «вертолет» и внутри этого контейнера напишем 4 элемента div с классом по порядку:

  • кокпит
  • хвостик
  • главный
  • ротор

Внутри этого класса «ротор» вы должны добавить div с классом «rotator» вместе с двумя пустыми div внутри этого класса «rotator».

<html>
 <head>
 </head>
 <body>
  <main class="helicopter">
     <div class="cockpit"></div>
     <div class="tail"></div>
     <div class="main"></div>
     <div class="rotor">
       <div class="rotator">
         <div></div>
         <div></div>
       </div>
     </div>
     <main>
 </body>
</html>

🚁Дизайн вертолета

В этом разделе мы создадим нашу структуру HTML, чтобы превратить ее в форму вертолета.

Body

body {
  /* put elements into center */
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cockpit class

.cockpit {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 195px;
    height: 195px;
    border-radius: 100px 40px 50px 50px;
    background-color: #44d2fd;
}

Вывод:

Затем мы должны добавить стекло в этот класс cockpit. Итак, давайте определим формы стекла на .cockpit :before и :after:

.cockpit::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -10px;
    left: -25px;
    width: 170px;
    height: 170px;
    border-radius: 40px;
    background-color: #302e37;
}
.cockpit::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -60px;
    left: -60px;
    width: 170px;
    height: 170px;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.05);
}

Вывод:

.tail class

Теперь нам нужно применить стили к классу .tail:

.tail {
    position: absolute;
    top: 50px;
    left: 150px;
    transform-origin: left center;
    border-top: 10px solid transparent;
    border-bottom: 80px solid transparent;
    border-left: 350px solid #2fadd2;
    border-bottom-right-radius: 10px;
    height: 10px;
}

Вывод:

.main class

Это будет форма корпуса ротатора вертолета:

.main {
    position: absolute;
    left: 130px;
    top: -10px;
    width: 40px;
    height: 20px;
    background: #302e37;
}

Вывод:

.rotor class

.rotor {
    width: 700px;
    height: 700px;
    border-radius: 350px;
    position: absolute;
    top: -360px;
    left: -200px;
    z-index: 2;
    overflow: hidden;
    background-color: #a299ab;
    opacity: 0.12;
    transform: scaleY(0.075);
}

Вывод:

После стилизации основного ротора нам нужно нацелить два пустых div внутри этого ротора, чтобы сделать этот ротор реалистичным. Вы увидите красивую анимацию, когда мы применим поворотанимации на следующем уроке.

.rotator div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350px;
    margin-top: -30px;
    width: 700px;
    height: 80px;
    background-color: #fff;
}
.rotator div:nth-child(1){
    transform: rotate(0deg);
}
.rotor div:nth-child(2) {
    transform: rotate(90deg);
}

Вывод:

🛫Возможность полета

До сих пор мы создавали форму и дизайн нашего вертолета. Но без анимаций и ключевых кадров не будет анимации. Итак, давайте придадим ему летную силу, используя свойство CSS animation.

⏱Определение @Keyframes

Прежде чем использовать свойство анимации, нам нужно создать ключевые кадры. Для этого проекта мы создадим два @keyframs с именами:

  • подпрыгивать
  • вращать

bounce

@keyframes bounce {
    0%,100%{
        transform: translate(0px, -50px) rotate(-15deg);
    }
    50% {
        transform: translate(0px, 50px) rotate(-10deg);
    }
}

rotate

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

📁Использование свойств анимации

Пока мы определили два @keyframes для нашего вертолетного проекта. Теперь добавьте их в наши классы .helicopter и .rotator.

.helicopter class

.helicopter {
    animation: bounce 5s infinite; /* adding bounce keyframes with duration 5s and infinite loop */
}

.rotator class

.rotator {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 350px;
    animation: rotate 0.6s linear infinite; /* added rotate @keyframs */
}

Вывод:

🎬Полное руководство

Вы можете написать код, чтобы создать этот проект с нуля, следуя этому видео.

👏Вывод

Итак, мы научились создавать сложные фигуры и анимацию, используя только CSS. Вам даже не нужно трогать JavaScript. Надеюсь, вам понравится этот проект. Вы можете подписаться на мой канал YT, если вас интересует Front-end dev.

Дайте мне знать, что вы думаете после завершения этого проекта. Не стесняйтесь оставлять комментарии ниже ✍.

Вы можете следить за мной в:
Twitter
Github
Insta

Удачного кодирования!