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

Các bạn thân mến, trong bài trước freetuts đã 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, freetuts tiếp tục hướng dẫn các bạn tạo hiệu ứng mặt trời mọc nhé

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 [free tuts .net]

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, freetuts đã 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, freetuts 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	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Cách sử dụng thẻ script html ...