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

DEMO

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é

 

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.

 

-------------------#####-------------------

Khóa học nên xem

Nguồn: freetuts.net