Hướng dẫn code hiệu ứng html
Xin chào tất cả các bạn, mình là Trung Quân aka trungquandev như mọi lần :D. Hôm nay mình sẽ hướng dẫn các bạn làm một thứ khá thú vị, cụ thể là làm cái hiệu ứng cho kiểu Thẻ Bài Magic – Magic Card bằng HTML, CSS và thêm chút Javascript nhé.“Bài này nằm trong loạt bài Tổng hợp kiến thức hữu ích cho lập trình viên trên trang blog chính thức trungquandev.com“ Show Những nội dung có trong bài:
1. Link hướng dẫn và show demo trên kênh YouTube: Trungquandev Official
2. Triển khai code– Lưu ý quan trọng nè: phần code dưới đây mình
sẽ chia ra dạng các file code để các bạn có thể copy paste về máy rồi chạy là xong ngay nhé. Cấu trúc thư mục dự án của chúng ta sẽ trông như sau (chỉ đơn giản 3 files thôi): magicCard index.html magicCard.css magicCard.js Đầu tiên là file index.html, các bạn copy pase đoạn code sau vào nhé:
Tiếp theo là file magicCard.css body {
margin: 0;
padding: 0;
min-height: 100vh;
background: #212534;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 2rem;
padding-bottom: 2rem;
box-sizing: border-box;
}
/* Customize type and color */
.customizing {
margin-top: 80px;
color: white;
display: flex;
gap: 12px;
}
.customizing>span.general-type {
font-size: 1.2rem;
cursor: pointer;
padding: 4px 12px;
border: 1px solid #636e72;
border-radius: 4px;
}
.customizing>span.general-type:hover {
border-color: #f7f1e3;
}
.customizing>span.clear-bg {
color: #636e72;
}
.customizing>span.fire {
color: #d63031;
}
.customizing>span.water {
color: #3c67e3;
}
.customizing>span.wood {
color: #00b894;
}
.customizing>span.earth {
color: #cc8e35;
}
.customizing>span.metal {
color: #b2bec3;
}
/* My information and credit resources */
.trungquandev-author {
margin-top: 40px;
color: white;
}
.sub-content {
font-size: 1.2rem;
text-align: center;
line-height: 1.6rem;
}
.sub-content a {
color: inherit;
text-decoration: none;
color: #1dd1a1;
}
.sub-content a:hover {
color: #55efc8;
}
/* Có thể hiểu đơn giản đây là một dạng khai báo biến nâng cao trong CSS, chưa support hết các trình duyệt */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@property */
@property --rotate {
syntax: "Cuối cùng là file magicCard.js (dùng để xử lý thay đổi màu sắc của các thẻ bài cũng như bỏ màu nền) /**
* Created by trungquandev.com's author on 14/08/2020. (DD/MM/YYYY)
* magicCard.js
*/
const magicCard = document.querySelector('.magic-card')
toggleRawBg = () => {
if (magicCard.classList.contains('magic-card-raw')) {
magicCard.classList.remove('magic-card-raw')
} else {
magicCard.classList.add('magic-card-raw')
}
}
resetDefault = () => {
const isRawMagicCard = magicCard.classList.contains('magic-card-raw')
magicCard.setAttribute('class', `magic-card ${isRawMagicCard ? 'magic-card-raw' : ''}`)
}
customType = (className) => {
// Nếu đã tồn tại class rồi thì không làm gì
if (magicCard.classList.contains(className)) return
// Trả về trạng thái mặc định trước khi thêm class mới
resetDefault()
magicCard.classList.add(className)
}
Kết quả sẽ như demo trong video mình giải thích code trên YouTube rồi nha, nếu bạn nào gặp vấn đề gì thì có thể comment luôn ở video trên kênh, mình sẽ check và support nhé. (Ngoài lề quen thuộc: Cảnh báo này dành cho bất kể trang nào khác mà có ý định copy bài không phải của các bạn thì hãy tôn trọng người viết bài chân chính, tuyệt đối không được xào nấu, chỉnh sửa linh tinh bài viết của mình cụ thể là không được xóa những liên kết (link) cũng như tự ý xóa các câu thoại của mình trong toàn bộ bài viết rồi post lại lên trang của các bạn như kiểu đây là bài của các bạn vậy, nếu tham khảo thì hãy để lại liên kết nguồn rõ ràng từ trang trungquandev, mình sẽ thường xuyên dùng tool để check, và nếu phát hiện ra thì cứ đơn giản là chắc chắn sẽ ăn report DMCA nhé.) 4. Chia sẻ full toàn bộ Source Code của bài hôm nay trên GithubVậy là kết thúc bài hôm nay mình đã hướng dẫn các bạn làm một chiếc hiệu ứng thẻ bài Magic trông cũng khá ổn áp như kiểu trong vài game đơn giản rồi nhé 😀 Cảm ơn các bạn đã dành thời gian đọc bài viết. Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo. Best Regards – 💻 Trungquandev Official ❤ Tham khảo kiến thức, ý tưởng: https://developer.mozilla.org/en-US/docs/Web/CSS/@property “Thanks for awesome knowledges.” Khóa học lập trình làm việc thực tế: |
