Điều Hay: CSS3

Ảnh Demo.

Lời đầu.

Xin chào, tôi là Nguyễn Chánh Đức, Admin của cái Blog này. Cũng khá lâu rồi, cụ thể đã là 4 tháng, tôi không đăng bài, blog ngưng hoạt động. Nhưng sau đó có những lời động lực của mấy người đàn anh, nên tôi quyết định sẽ viết bài và tiếp tục hoạt động trên blog này. Mong các bạn, các đối tác đàn anh đi trước sẽ luôn ủng hộ tôi. Những người luôn cho tôi động lực này chính là những người đàn anh đi trước, cụ thể ra đó là anh Quốc Bảo (Admin Quốc Bảo Blog), Lê Tuấn Anh (Admin Star Cường IT), Hưng Star (Admin Hưng Star-IT), Nguyễn Trọng Khanh (Admin Khanh Blogger), Tạ Thiên Quốc (Star Quốc Blog) và Niệm Style (Phan Văn Niệm). Cùng với 2 người bạn với tôi chính là Nguyễn Minh Quân (Admin Prince Design Blog), Trần Thái Tính (Admin Tính Getter Blog). Cảm ơn những đối tác đã ủng hộ và có những lời động lực đến tôi.

Sau đây, tôi xin chia sẻ tới các độc giả bài viết này. Mời các bạn tham khảo.

Demo

Các bạn có thể xem demo sau đây:

Demo

Cách làm:

Bước 1: Các bạn chèn (cài đặt) font awesome vào blog. Bằng cách thêm dòng này:

<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/5.0.6/css/font-awesome.css'>

Bước 2: Các bạn thêm CSS này vào trước thẻ b:skin :


.menu-item, .menu-open-button { background: #EEEEEE; border-radius: 100%; width: 80px; height: 80px; margin-left: -40px; position: absolute; color: #FFFFFF; text-align: center; line-height: 80px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .menu-open { display: none; } .lines { width: 25px; height: 3px; background: #596778; display: block; position: absolute; top: 50%; left: 50%; margin-left: -12.5px; margin-top: -1.5px; -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms; } .line-1 { -webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0); } .line-2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .line-3 { -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } .menu-open:checked + .menu-open-button .line-1 { -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } .menu-open:checked + .menu-open-button .line-2 { -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1); transform: translate3d(0, 0, 0) scale(0.1, 1); } .menu-open:checked + .menu-open-button .line-3 { -webkit-transform: translate3d(0, 0, 0) rotate(-45deg); transform: translate3d(0, 0, 0) rotate(-45deg); } .menu { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80px; height: 80px; text-align: center; box-sizing: border-box; font-size: 26px; } .menu-item:hover { background: #EEEEEE; color: #3290B1; } .menu-item:nth-child(3) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(4) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(5) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(6) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(7) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(8) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(9) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-open-button { z-index: 2; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition-duration: 400ms; transition-duration: 400ms; -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); } .menu-open-button:hover { -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .menu-open:checked + .menu-open-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .menu-open:checked ~ .menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 180ms; -webkit-transition-duration: 180ms; -webkit-transform: translate3d(0.08361px, -104.99997px, 0); transform: translate3d(0.08361px, -104.99997px, 0); } .menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 280ms; -webkit-transition-duration: 280ms; -webkit-transform: translate3d(90.9466px, -52.47586px, 0); transform: translate3d(90.9466px, -52.47586px, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 380ms; -webkit-transition-duration: 380ms; -webkit-transform: translate3d(90.9466px, 52.47586px, 0); transform: translate3d(90.9466px, 52.47586px, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 480ms; -webkit-transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 104.99997px, 0); transform: translate3d(0.08361px, 104.99997px, 0); } .menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 580ms; -webkit-transition-duration: 580ms; -webkit-transform: translate3d(-90.86291px, 52.62064px, 0); transform: translate3d(-90.86291px, 52.62064px, 0); } .menu-open:checked ~ .menu-item:nth-child(8) { transition-duration: 680ms; -webkit-transition-duration: 680ms; -webkit-transform: translate3d(-91.03006px, -52.33095px, 0); transform: translate3d(-91.03006px, -52.33095px, 0); } .menu-open:checked ~ .menu-item:nth-child(9) { transition-duration: 780ms; -webkit-transition-duration: 780ms; -webkit-transform: translate3d(-0.25084px, -104.9997px, 0); transform: translate3d(-0.25084px, -104.9997px, 0); } .item-1 { background-color: #669AE1; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-1:hover { color: #669AE1; text-shadow: none; } .item-2 { background-color: #70CC72; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-2:hover { color: #70CC72; text-shadow: none; } .item-3 { background-color: #FE4365; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-3:hover { color: #FE4365; text-shadow: none; } .item-4 { background-color: #C49CDE; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-4:hover { color: #C49CDE; text-shadow: none; } .item-5 { background-color: #FC913A; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-5:hover { color: #FC913A; text-shadow: none; } .item-6 { background-color: #62C2E4; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-6:hover { color: #62C2E4; text-shadow: none; }

Bước 3: Các bạn thêm cái HTML này vào nơi muốn chèn là sẽ có cái menu như trên Demo


<nav class="menu"> <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" /> <label class="menu-open-button" for="menu-open"> <span class="lines line-1"></span> <span class="lines line-2"> </span> <span class="lines line-3"></span> </label> <a href="#" class="menu-item item-1"> <i class="fa fa-anchor"></i> </a> <a href="#" class="menu-item item-2"> <i class="fa fa-coffee"></i> </a> <a href="#" class="menu-item item-3"> <i class="fa fa-heart"></i> </a> <a href="#" class="menu-item item-4"> <i class="fa fa-microphone"></i> </a> <a href="#" class="menu-item item-5"> <i class="fa fa-star"></i> </a> <a href="#" class="menu-item item-6"> <i class="fa fa-diamond"></i> </a> </nav>

Lời kết

Bài viết tới đây là đã hết rồi, tôi xin cảm ơn tất cả các bạn và độc giả đã ủng hộ tôi, quan tâm tôi trong suốt thời gian qua. Xin thông báo lại: Star Đức Blog đã hoạt động lại như trước. Mọi người cố gắng ủng hộ nhé.

Code: Thuthuatweb

Ả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é!

TẠO MENU VỚI HIỆU ỨNG VÒNG TRÒN VỚI CSS3.