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

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é

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

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 left phụ thuộc vào giá trị width 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.

icon down gif Tải về tài nguyên của bài viết này.

DEMO

Chuyên đề học lập trình web: Học phần HTML / CSS

Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.

Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.

BÀI VIẾT

notice png LIST home png HOME hot gif BÁO
LỖI
top png TOP