Bộ sưu tập các ví dụ mã thẻ lật HTML và CSS miễn phí được chọn thủ công từ codepen và các tài nguyên khác. Cập nhật BST tháng 7/2019. 5 ví dụ mới
Những bài viết liên quan
- Thẻ CSS
- Thẻ blog CSS
- Hiệu ứng di chuột trên thẻ CSS
- Bố cục thẻ CSS
- Thẻ thiết kế vật liệu CSS
- Thẻ phim CSS
- Thẻ sản phẩm CSS
- Thẻ tín dụng CSS
- Thẻ hồ sơ CSS
- Thẻ công thức CSS
- Danh thiếp CSS
Tác giả
- Ivan Grozdic
- 11 Tháng Bảy, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Định giá Thẻ CSS thuần túy
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. unicons. css
Tác giả
- Rafael Goulart
- 1 Tháng Tư, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)
Về một mã
Thẻ tương tác và đáp ứng với chủ đề không gian
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- bảng chữ cái
- 18 Tháng Mười Hai, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)
Về một mã
Phản xạ lật thẻ
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. không
Phụ thuộc. -
Tác giả
- Kiến Thức Studio
- Ngày 12 tháng 9 năm 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Hiệu ứng lật bài
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. không
Phụ thuộc. -
Tác giả
- Abubaker Saeed
- 27 Tháng Tư, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Giao diện người dùng - Lật thẻ
Thẻ lật (sử dụng :focus-within cho a11y)
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. không
Phụ thuộc. -
Tác giả
- Jonno Witts
- 2 Tháng Giêng, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)/JavaScript
Về mã
Thẻ đặc quyền Slugger CSS Fallout 76
Chỉ CSS (với một chút tương tác JS gốc) của thẻ đặc quyền Fallout 76. Tôi đã thấy các thẻ đặc quyền khi xem một số video. Lúc đầu, tôi nghĩ rằng phần notch/gờ ở góc sẽ rất thú vị để tạo lại bằng CSS, tuy nhiên khi tôi đang xây dựng nó, tôi nhận ra rằng có rất nhiều bit sẽ thú vị để tạo bằng CSS. Cụ thể là gradient hình nón (được sử dụng cho nền ở mặt trước của thẻ). Nó chưa được hỗ trợ bên ngoài Chrome (sử dụng dự phòng) nhưng đó là một đoạn CSS gọn gàng. Các bit khác được sử dụng. các hình dạng CSS khác nhau bằng cách sử dụng các lớp chồng lên nhau (các ngôi sao), Phông chữ Google, hình động, độ dốc có điểm dừng và tất cả các phần còn lại để dễ dàng thay đổi kích thước ở các kích thước thiết bị khác nhau
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. conic-gradient. js
Tác giả
- kaper
- 25 Tháng Chín, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)
Về mã
Thẻ lật CSS
Thẻ lật có thể nhấp CSS thuần túy
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. phông chữ tuyệt vời. css
Tác giả
- Piotr Galor
- 20 Tháng Bảy, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Di chuột CSS phức tạp
Thử nghiệm bố cục thẻ lấy cảm hứng từ 3D, VR. chủ đề trượt ván
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Oliver Knoblich
- 18 Tháng Sáu, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS/JavaScript
Về mã
Lưới thẻ lật đáp ứng
Lưới thẻ lật đáp ứng với 1. 1 tỷ lệ khung hình
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. khởi động. cssjquery. js
Tác giả
- alex paul
- 18 Tháng Sáu, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS/JavaScript
Về mã
Figcaption cho lật thẻ
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. phông chữ tuyệt vời. css
Tác giả
- Dmitry Korobov
- 11 Tháng Sáu, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS (Sass)
Về mã
lật bài
Thẻ lật CSS đơn giản
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Welling Guzman
- 12 Tháng Năm, 2018
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (Ít hơn)
Về mã
Thẻ lật CSS 3D
Thẻ lật chéo CSS 3D
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Kayleigh
- 28 Tháng Ba, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)
Về mã
Thẻ lật
Thẻ flippy HTML và CSS đơn giản
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Arash Rasteh
- 23 Tháng Ba, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)
Về mã
Thẻ lật HTML và CSS
Thẻ lật 3D thuần CSS và HTML
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. khởi động. css
Tác giả
- Aron
- 12 Tháng Ba, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)
Về mã
Thẻ lật CSS thuần túy
Thẻ CSS thuần túy với khả năng lật ngang và dọc hấp dẫn
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Charles Ojukwu
- 8 Tháng Hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML (Pug) / CSS (SCSS)
Về mã
lật thẻ
Hiệu ứng lật thẻ 3D bằng nút 3D
Trình duyệt tương thích. Chrome, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- zắc
- 18 Tháng Mười Hai, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS (Sass)/JavaScript (Babel)
Về mã
Thẻ sản phẩm 3D
Một dự án mà tôi đã sử dụng để tìm hiểu thêm một chút về cách sử dụng các thuộc tính CSS 3D và một số thực hành với các hiệu ứng đổ bóng hoạt hình hiệu quả hơn. Những điều nhỏ bé khiến tôi hạnh phúc. chuyển tiếp box-shadow hiệu quả hơn. Bóng hộp được áp dụng cho :after và chỉ có độ mờ được làm động
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Hakkam Abdullah
- 15 Tháng Tám, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Thẻ thị sai
Thẻ lật CSS với hiệu ứng thị sai
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- lục lọi Tyrell
- 31 Tháng Bảy, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Thẻ lật thị sai
Thẻ lật thị sai. Độ trễ thị sai thực sự đúng
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Mario Duarte
- 22 Tháng Sáu, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)/JavaScript (Babel)
Về mã
Yếu tố nhóm thẻ yếu tố
Giao diện người dùng thẻ với tương tác 3D đơn giản
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. jquery. js
Tác giả
- Rita Bradley
- 4 Tháng Năm, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS (SCSS)
Về mã
Lật bài 3D
Chỉ là một bản demo lật thẻ nhỏ dễ thương. Chưa phải là một trò chơi, nhưng nhìn vẫn đẹp. Di chuột qua các thẻ để xem ý tôi là gì
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. khởi động. css
Tác giả
- Eina O
- 16 Tháng Ba, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Thẻ Flash Ampersand
Thẻ flash ký hiệu CSS với văn bản loại bỏ và hoạt hình lật
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Serge Nikishkin
- 19 Tháng mười hai, 2016
liên kết
- bản demo và mã
Làm với
- HTML/CSS/JavaScript
Về mã
lật bài
Lật thẻ bằng nút kích hoạt
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. jquery. js
Tác giả
- Nicola Mihaita
- ngày 26 tháng 10 năm 2016
liên kết
- bản demo và mã
Làm với
- HTML/CSS/JavaScript
Về mã
Thẻ lật 3D
Hộp/thẻ lật hình ảnh 3D thực tế
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. jquery. js