Ảnh minh họa.







Lời đầu



Xin chào tất cả các bạn, hôm nay mình xin hướng dẫn các bạn làm mẫu dự báo thời tiết đẹp bằng CSS3 nhé. Mời các bạn tham khảo bài viết, chúc các bạn 1 ngày vui vẻ!

Hướng dẫn cách làm



HTML
<div class="weather-wrapper"> <div class="weather-card madrid"> <div class="weather-icon sun"></div> <h1>33º</h1> <p>Hải Dương</p> </div> <div class="weather-card london"> <div class="weather-icon cloud"></div> <h1>33º</h1> <p>Sài Gòn</p> </div> </div>

CSS 

Sau đó, chúng ta sẽ tạo 1 hiệu ứng động bằng CSS bên dưới:

*, *:before, *:after { box-sizing: border-box; } .weather-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .weather-card { margin: 20px 20px; border-radius: 20px; position: relative; overflow: hidden; width: 270px; height: 270px; background-color: white; box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1); -webkit-animation: appear 500ms ease-out forwards; animation: appear 500ms ease-out forwards; } .weather-card h1 { position: absolute; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 80px; color: #B8B8B8; bottom: 0; left: 35px; opacity: 0; -webkit-transform: translateX(150px); -ms-transform: translateX(150px); transform: translateX(150px); -webkit-animation: title-appear 500ms ease-out 500ms forwards; animation: title-appear 500ms ease-out 500ms forwards; } .weather-card p { position: absolute; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 28px; color: #d2d2d2; bottom: 0; left: 35px; -webkit-animation: title-appear 1s ease-out 500ms forwards; animation: title-appear 1s ease-out 500ms forwards; } .weather-icon { position: relative; width: 50px; height: 50px; top: 0; float: right; margin: 40px 40px 0 0; -webkit-animation: weather-icon-move 5s ease-in-out infinite; animation: weather-icon-move 5s ease-in-out infinite; } .sun { background: #FFCD41; border-radius: 50%; box-shadow: rgba(255, 255, 0, 0.1) 0 0 0 4px; -webkit-animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite; animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite; } @-webkit-keyframes light { from { box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px; } to { box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px; } } @keyframes light { from { box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px; } to { box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px; } } .cloud { margin-right: 60px; background: #e1e1e1; border-radius: 20px; width: 25px; height: 25px; box-shadow: #e1e1e1 24px -6px 0 2px, #e1e1e1 10px 5px 0 5px, #e1e1e1 30px 5px 0 2px, #e1e1e1 11px -8px 0 -3px, #e1e1e1 25px 11px 0 -1px; } .cloud:after { content: ""; position: absolute; border-radius: 10px; background-color: transparent; width: 4px; height: 12px; left: 0; top: 31px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation: rain 800ms ease-in-out infinite alternate; animation: rain 800ms ease-in-out infinite alternate; } @-webkit-keyframes rain { from { box-shadow: #2092A9 8px 0px, #2092A9 32px -6px, #2092A9 20px 0px; } to { box-shadow: #2092A9 8px 6px, #2092A9 32px 0px, #2092A9 20px 6px; } } @keyframes rain { from { box-shadow: #2092A9 8px 0px, #2092A9 32px -6px, #2092A9 20px 0px; } to { box-shadow: #2092A9 8px 6px, #2092A9 32px 0px, #2092A9 20px 6px; } } @-webkit-keyframes weather-icon-move { 50% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes weather-icon-move { 50% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } .inspiration { color: #aeaeae; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 24px; text-align: center; } .inspiration a { color: #FA565F; font-weight: 400; -webkit-animation: all 300ms ease-in-out; animation: all 300ms ease-in-out; } @-webkit-keyframes appear { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 75% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes appear { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 75% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes title-appear { from { opacity: 0; -webkit-transform: translateX(150px); transform: translateX(150px); } to { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes title-appear { from { opacity: 0; -webkit-transform: translateX(150px); transform: translateX(150px); } to { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } }



Tổng kết




Ảnh demo.
Bài viết đến đây là kết thúc rồi, mình mong là các bạn sẽ chỉnh lại 1 số CSS cho hoàn chỉnh và hợp với Blog các bạn. Chúc các bạn 1 ngày vui vẻ và hạnh phúc!

Các bạn muốn xem demo trực tiếp thì click tại đây nhé!

CHIA SẺ BÀI VIẾT

- - 22 bình luận
CHUYÊN MỤC
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: nguyenchanhduc0908@gmail.com
• Facebook: facebook.com/ducidol0908

BÌNH LUẬN (22)

  1. Mà anh ơi anh còn link trỏ chuột giống anh không cho em xin với

    Trả lờiXóa
    Trả lời
    1. Em chèn CSS này dưới thẻ < body nhé.
      < style> html,body{cursor:url(https://i.imgur.com/5v5M8gh.png),auto}
      a:hover,li:hover,p:hover,.span:hover{cursor:url(https://i.imgur.com/IXULuQ1.png),auto}

      Xóa
    2. Vâng em cảm ơn anh nhiều lắm :)))

      Xóa
  2. mày thích chửi lén anh k

    Trả lờiXóa
  3. Em nên thêm Demo rõ hơn tý nữa thì nhiều người sẽ thấy hay :))

    Trả lờiXóa
  4. Cái này không edit được nhiều. Cho nên chỉ để cho đẹp thôi :))

    Trả lờiXóa
  5. Giữ lại bài này, đang cần tìm 1 đoạn css thời tiết thì gặp :D

    Trả lờiXóa
  6. cái này có chính xác không nhỉ

    Trả lờiXóa

Một số lưu ý khi bình luận

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Không được backlink và nói tục. Hãy là một độc giả có ý thức.

Nếu các bạn muốn liên hệ riêng với mình thì hãy click tại đây nhé.