Css hoạt hình lật 3d

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