Xây dựng animation máy bay trực thăng với CSS

Xây dựng animation máy bay trực thăng với CSS

Anh NguyễnLeave a comment

Xin chào các bạn 👨‍💻

Trong bài viết này, mình sẽ xây dựng project animation máy bay trực thăng bay tuyệt đẹp chỉ sử dụng HTML và CSS. Sẽ hợp hơn nếu bạn đã có mức kiến thức nhất định về CSS rồi.

⛳ Thuộc tính animation CSS sử dụng trong project

  • CSS Transformations
  • 3D Transformations
  • CSS Transitions
  • Animation
  • Custom Timing Function (keyframes)

Vậy bạn có hào hứng khi xây dựng project này không? Hãy bắt đầu nào! 🏒

🏗 Xác định cấu trúc máy bay trực thăng bằng HTML

Hãy xác định một container trong main được gọi là ‘helicopter’ và bên trong container này viết 4 phần tử div với class theo thứ tự:

  • cockpit
  • tail
  • main
  • rotor

Bên trong lớp “rotor” này, bạn phải thêm một div với class “rotator” cùng với hai div trống bên trong lớp “rotator” này.

<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>Code language: HTML, XML (xml)

🚁 Thiết kế máy bay trực thăng

Trong phần này, chúng ta sẽ thiết kế cấu trúc HTML để biến thành hình máy bay trực thăng.

body {
  /* put elements into center */
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}Code language: CSS (css)
.cockpit {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 195px;
    height: 195px;
    border-radius: 100px 40px 50px 50px;
    background-color: #44d2fd;
}Code language: CSS (css)

Kết quả:

Xây dựng animation máy bay trực thăng với CSS

Sau đó, chúng ta phải thêm kính cho lớp cockpit này. Vì vậy, hãy xác định các hình dạng trên .cockpit:before và :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);
}Code language: CSS (css)

Kết quả:

Xây dựng animation máy bay trực thăng với CSS

Bây giờ, chúng ta phải áp dụng các kiểu cho lớp .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;
}Code language: CSS (css)

Kết quả:

Xây dựng animation máy bay trực thăng với CSS

Đây sẽ là hình dạng body của máy quay trực thăng:

.main {
    position: absolute;
    left: 130px;
    top: -10px;
    width: 40px;
    height: 20px;
    background: #302e37;
}Code language: CSS (css)

Kết quả:

Xây dựng animation máy bay trực thăng với CSS
.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);
}Code language: CSS (css)

Kết quả:

Xây dựng animation máy bay trực thăng với CSS

Sau khi tạo kiểu cho rotor chính, chúng ta phải nhắm mục tiêu hai div trống bên trong rôto này để biến rôto này thành hiện thực. Bạn sẽ thấy hình ảnh động đẹp mắt khi chúng ta áp dụng thuộc tính rotate:

.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);
}Code language: CSS (css)

Kết quả:

Xây dựng animation máy bay trực thăng với CSS

🛫 Khả năng bay của máy bay trực thăng

Cho đến bây giờ, chúng ta đã tạo ra hình dạng và thiết kế máy bay trực thăng của mình. Nhưng nếu không có animation và keyframe thì sẽ không thể hoạt động.

⏱ Định nghĩa @Keyframes máy bay trực thăng

Trước khi sử dụng thuộc tính animation, chúng ta cần tạo các khung hình chính. Đối với project này, chúng ta sẽ tạo 2 @keyframe được gọi là:

  • bounce
  • rotate
@keyframes bounce {
    0%,100%{
        transform: translate(0px, -50px) rotate(-15deg);
    }
    50% {
        transform: translate(0px, 50px) rotate(-10deg);
    }
}Code language: CSS (css)
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}Code language: CSS (css)

📁 Sử dụng thuộc tính animation máy bay trực thăng

Chúng ta đã xác định 2 @keyframe cho project máy bay trực thăng của mình. Bây giờ, hãy thêm chúng vào lớp .helicopter và .rotator. 

.helicopter {
    animation: bounce 5s infinite; /* adding bounce keyframes with duration 5s and infinite loop */
}Code language: CSS (css)
.rotator {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 350px;
    animation: rotate 0.6s linear infinite; /* added rotate @keyframes */
}Code language: CSS (css)

Kết quả:

👏 Kết luận

Chúng ta đã học được cách tạo các hình dạng và animation máy bay trực thăng phức tạp chỉ bằng cách sử dụng CSS. Bạn thậm chí không cần phải chạm vào JavaScript. Hy vọng bạn sẽ thích project này.

Hãy cho mình biết bạn nghĩ gì sau khi hoàn thành project này. Hãy để lại bình luận bên dưới ✍.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Leave a Reply

Your email address will not be published. Required fields are marked *