ạo hiệu ứng mặt trời mọc với HTML và CSS - Học CSS3 căn bản & nâng cao
Các bạn thân mến, trong bài trước Zaidap.com đã 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, Zaidap.com 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 ...
Các bạn thân mến, trong bài trước Zaidap.com đã 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, Zaidap.com 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 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, Zaidap.com đã 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, Zaidap.com 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.
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.
