CSS3

Tạo hiệu ứng mặt trời mọc với HTML và CSS

Posted on by admin

Các bạn thân mến, trong bài trước kiso đã hướng dẫn các bạn cách tạo mưa rơi với HTML và CSS. Chắc hẳn rằng nhiều bạn rất thích thú với những hiệu ứng này. Hôm nay, kiso tiếp tục hướng dẫn các bạn tạo hiệu ứng mặt trời mọc nhé

tao hieu ung mat troi moc jpg

1. Phần HTML

Trước hết hãy xem toàn bộ bố cục của hiệu ứng

<body>
  <div class="main">
    <div class="full-sun">
      <div class="sun"></div>
      <div class="ray1"></div>
      <div class="ray2"></div>
      <div class="ray3"></div>
      <div class="ray4"></div>
      <div class="ray5"></div>
      <div class="ray6"></div>
    </div>
    <div class="cloud">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
    </div>
  </div>
</body>

Bố cục của hiệu ứng hơi rối nên mình sẽ chia làm 2 phần

Bài viết này được đăng tại [kiso.vn]

Phần mặt trời

    <div class="full-sun">
      <div class="sun"></div>
      <div class="ray1"></div>
      <div class="ray2"></div>
      <div class="ray3"></div>
      <div class="ray4"></div>
      <div class="ray5"></div>
      <div class="ray6"></div>
    </div>

Trong đây bao gồm mặt trời hình tròn và các tia chiếu sáng được thể hiện bằng các thẻ div

Phần mây

    <div class="cloud">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
    </div>

Có bố cục như cách vẽ mây trong bài hiệu ứng mưa.

2. Phần CSS

Trước hết hãy lướt qua toàn bộ đoạn mã

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  position: relative;
}

.full-sun {
  width: 80px;
  height: 80px;
  left: 130px;
  background-color: transparent;
  position: relative;
  animation: sunUp 10s linear infinite;
}

.sun, .sun ~ div {
  transition: 0.6s ease-in-out;
  animation: shine 10s linear infinite;
}

@keyframes sunUp {
  0% {
    top: -40px;   
  }
  50% {
    top: -150px;
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
    top: -150px;
  }
}

@keyframes shine {
  30% {
    filter: brightness(0.5);
  }
  40% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5);
  }
  60% {
    filter: brightness(2.5);
  }
  70% {
    filter: brightness(3);
  }
  100% {
    filter: brightness(3);
  }
}

.sun {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: orange;
  position: absolute;
}

.sun ~ div {
  width: 2px;
  height: 140px;
  background-color: orange;
  position: absolute;
  top: -30px;
  left: 39px;
}

.ray1 {
  transform: rotate(0);
}

.ray2 {
  transform: rotate(30deg);
}

.ray3 {
  transform: rotate(60deg);
}

.ray4 {
  transform: rotate(90deg);
}

.ray5 {
  transform: rotate(120deg);
}

.ray6 {
  transform: rotate(150deg);
}

.cloud {
  position: relative;
  height: 100px;
  width: 200px;
  background-color: white;
}
 
.cloud > div {
  border: 2px solid black;
  border: none;
  background-color: grey;
  animation: bright linear 10s infinite;
}

@keyframes bright {
  to {
    background-color: skyblue;
  }
}

.c1 {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  bottom: 120px;
  left: 30px;
  z-index: 1;
}
 
.c2 {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  right: 20px;
  bottom: 105px;
  z-index: 1;
}
 
.c3 {
  position: absolute;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  bottom: 100px;
  z-index: 2;
}

Bước 1: tạo định dạng cho lớp main

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  position: relative;
}

Bước 2: tạo định dạng cho toàn bộ mặt trời

.full-sun {
  width: 80px;
  height: 80px;
  left: 130px;
  background-color: transparent;
  position: relative;
  animation: sunUp 10s linear infinite;
}

Hiệu ứng sunUp để di chuyển nhô lên như mặt trời mọc.

Bước 3: tạo hiệu ứng sunUp

@keyframes sunUp {
  0% {
    top: -40px;   
  }
  50% {
    top: -150px;
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
    top: -150px;
  }
}

Thuộc tính rotate được thêm vào để tạo mặt trời xoay tròn, giúp chân thật hơn.

Bước 4: tạo mặt trời tròn

.sun {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: orange;
  position: absolute;
}

Bước 5: tạo định dạng chung cho các tia nắng

.sun ~ div {
  width: 2px;
  height: 140px;
  background-color: orange;
  position: absolute;
  top: -30px;
  left: 39px;
}

Lưu ý giá trị của thuộc tính top là left phụ thuộc vào giá trị width và height của tia nắng và width height của mặt trời tròn.

Bước 6: tạo định dạng các tia nắng

.ray1 {
  transform: rotate(0);
}

.ray2 {
  transform: rotate(30deg);
}

.ray3 {
  transform: rotate(60deg);
}

.ray4 {
  transform: rotate(90deg);
}

.ray5 {
  transform: rotate(120deg);
}

.ray6 {
  transform: rotate(150deg);
}

Bước 7: gán hiệu ứng chiếu sáng cho mặt trời tròn và tia nắng

.sun, .sun ~ div {
  transition: 0.6s ease-in-out;
  animation: shine 10s linear infinite;
}

Bước 8: tạo hiệu ứng chiếu sáng

@keyframes shine {
  30% {
    filter: brightness(0.5);
  }
  40% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5);
  }
  60% {
    filter: brightness(2.5);
  }
  70% {
    filter: brightness(3);
  }
  100% {
    filter: brightness(3);
  }
}

Bước 9: tạo định dạng đám mây và hiệu ứng

Đám mây được tạo tương tự như bài trước, chỉ thay đổi hiệu ứng chuyển màu từ xám sáng xanh da trời.

.cloud {
  position: relative;
  height: 100px;
  width: 200px;
  background-color: white;
}
 
.cloud > div {
  border: 2px solid black;
  border: none;
  background-color: grey;
  animation: bright linear 10s infinite;
}

@keyframes bright {
  to {
    background-color: skyblue;
  }
}

.c1 {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  bottom: 120px;
  left: 30px;
  z-index: 1;
}
 
.c2 {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  right: 20px;
  bottom: 105px;
  z-index: 1;
}
 
.c3 {
  position: absolute;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  bottom: 100px;
  z-index: 2;
}

3. Lời Kết

Sau bài học hôm nay, kiso đã chia sẻ cách tạo hiệu ứng mặt trời mọc đến các bạn. Trong những bài tiếp theo, kiso sẽ hướng dẫn các bạn làm hiệu ứng gió thổi.

Cảm ơn các bạn, hẹn gặp lại trong các bài viết tiếp theo.

Danh sách file tải về

Tên file tải vềPass giải nén
Tạo hiệu ứng mặt trời mọc kiso.vn hoặc gameportable.net

Bài viết liên quan

[CSF-2] Một số thiết lập CSF, LFD 1
[CSF-2] Một số thiết lập CSF, LFD
24/11/2022

Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Phần HTML2. Phần CSS3. Lời Kết1. Bảo vệ...

[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF) 3
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
24/11/2022

Nội dung chính1. Phần HTML2. Phần CSS3. Lời Kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng...

Sử dụng SSH Key với Gitlab và Github 7
Sử dụng SSH Key với Gitlab và Github
22/11/2022

Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...

Directory traversal vulnerabilities (phần 4) 10
Directory traversal vulnerabilities (phần 4)
21/11/2022

Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn...

Directory traversal vulnerabilities (phần 3) 39
Directory traversal vulnerabilities (phần 3)
21/11/2022

Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu...

Directory traversal vulnerabilities (phần 2) 67
Directory traversal vulnerabilities (phần 2)
21/11/2022

Nội dung chính1. Phần HTML2. Phần CSS3. Lời KếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác...

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *