Codepen nút css tinh khiết

Code và demo 30 hiệu ứng Pure CSS Animation Snippets. Bộ sưu tập bao gồm 30 đoạn code css tạo hiệu ứng hoạt hình thật sinh động

Thực đơn hấp dẫn của Lucas Bebber

Chuyển đổi menu hoạt hình tròn với các biểu tượng bằng hoạt hình CSS thuần túy

Điểm đánh dấu bản đồ hoạt hình của Andreas Storm

Điểm đánh dấu bản đồ này giống như biểu tượng ghim iOS và tiếp tục tạo hiệu ứng gợn sóng bên ngoài

Văn bản bị mờ Bởi Nick Mkrtchyan

Bạn đã bao giờ muốn tạo hiệu ứng văn bản từ mờ đến rõ ràng HTML/CSS động chưa?

Đang tải hoạt ảnh của Manoz

Trình tải GIF và SVG thường là lựa chọn phổ biến nhất cho thiết kế web – nhưng những trình tải nâng cao này được tạo chỉ bằng CSS thuần túy

Biểu tượng đám mây Bởi Dustin Boersma

Hoạt hình mờ dần có thể thực sự thêm gia vị cho bất kỳ bố cục nào. Bản trình diễn này sử dụng các biểu tượng đám mây nhỏ với hiệu ứng mờ dần CSS3 tùy chỉnh

Huy hiệu nhảy qua của Paul Foster

Các biểu tượng huy hiệu đã được sử dụng chủ yếu cho các thông báo trên ứng dụng iOS. Giờ đây, chúng có thể được tích hợp vào bất kỳ phần nào trên trang web của bạn với hiệu ứng hop-over CSS lạ mắt

Bảng giá của Mike Torosian

Những bảng này lớn, chịu trách nhiệm và cho bạn biết chi phí của những thứ. Nhưng chúng không chỉ là bất kỳ bảng giá thông thường nào vì chúng có hiệu ứng hoạt hình thú vị khi di chuột

Hệ mặt trời CSS của Yash Bhardwaj

Có lẽ điều này hào nhoáng hơn là thực dụng, nhưng một hệ mặt trời hoàn chỉnh hoạt hình bằng CSS chắc chắn là một thành tích ấn tượng

Biểu tượng bánh hamburger Bởi Nathan Schmidt

Nếu bạn cần một số biểu tượng bánh hamburger ba thanh hoạt hình thì không đâu khác ngoài đoạn mã nổi bật này

Phương thức CSS thuần của Ian McGrory

Cửa sổ phương thức thường được tạo bằng JavaScript nhưng ví dụ này hoàn hảo cho bất kỳ nhà phát triển nào muốn dùng thử phương thức CSS thuần túy

Nút Twitter 3D của Bennett Feely

Bạn đã bao giờ muốn thêm một số pizazz vào blog hoặc trang danh mục đầu tư của mình chưa?

Mẫu thiết kế Material Design của Chris Sevilleja

Thiết kế material design của Google được xây dựng trên thực tế để có hoạt ảnh rõ ràng. May mắn thay, các nhà phát triển khác đã chú ý và tạo ra một số ý tưởng tinh tế như biểu mẫu web thiết kế material design CS3 này

Chuyển đổi CSS thuần túy của Brady Sammons

Tăng cường giao diện biểu mẫu của bạn bằng các hộp kiểm tùy chỉnh và phong cách, nút radio và công tắc trượt kiểu iOS này

Hộp 3D của Joshua Hibbert

Các hiệu ứng di chuột động hoàn hảo cho bất kỳ thư viện ảnh nào, nhưng những hiệu ứng 3D này thực sự đưa hoạt ảnh lên một tầm cao mới

Nhãn biểu mẫu hoạt hình Bởi Lucas Bebber

Cần tiết kiệm một số chỗ trên các trường nhập văn bản của bạn?

Thanh trượt CSS thuần túy Bởi Damian Drygiel

Mã hóa một trình chiếu hình ảnh là công việc khó khăn. Vì vậy, thay vì xây dựng một cái từ đầu, hãy tự cứu mình và xây dựng trên thanh trượt hình ảnh chỉ dành cho CSS tùy chỉnh này

Vòng tròn hạnh phúc của Jan Reimers

Các hiệu ứng hoạt hình thiết kế web có thể trở nên khá trừu tượng và các vòng tròn CSS hoạt hình liên tục này là bằng chứng tích cực cho thực tế này

Hồ sơ hoạt hình CSS Bởi Assaf Gelber

Thẻ hồ sơ phục vụ mục đích của họ nhưng cũng có thể hơi nhạt nhẽo. Vậy tại sao không làm nổi bật các thiết kế thẻ hồ sơ với hoạt hình CSS gọn gàng này?

Danh sách thả xuống đàn accordion của Pedro Nauck

Đàn accordions hoàn hảo cho Câu hỏi thường gặp, menu điều hướng và thậm chí cả thanh trượt nội dung nhỏ. Nhưng để thực sự xây dựng một chiếc đàn accordion slam dunk, bạn nên thử thêm hoạt ảnh CSS thuần túy này vào trang của mình

Ảnh động của trình chỉnh sửa trang Bởi Lloyd Wheeler

Biểu tượng động này có thể được sử dụng làm mẫu cho các công ty khởi nghiệp hoặc ứng dụng web cần giải thích trực quan mục đích và/hoặc chức năng của trang web của họ

Tín dụng phim cuộn Tác giả Oliver Knoblich

Tín dụng phim cuộn thường được tìm thấy trên màn hình bạc nhưng nhờ có Oliver Knoblich, chúng tôi có thể tái tạo hiệu ứng trong trình duyệt web của riêng mình

Nguyên mẫu tài liệu đáp ứng của Michiel Bijl

Đây là một hiệu ứng biểu tượng hoạt hình CSS khác thể hiện xu hướng đáp ứng của bố cục trang web material design

Cảnh thị sai Bởi Oliver Knoblich

Hình nền cuộn có thể là một bổ sung tuyệt đẹp cho bất kỳ trang web nào. Cảnh núi non thị sai này với trăng tròn và cột điện thoại tạo thêm bầu không khí yên tĩnh cho trang

Biểu mẫu đăng nhập CSS3 của Kushagra Agarwal

Hoạt hình biểu mẫu là một cách tuyệt vời để đưa sức sống vào các yếu tố tương tác nhỏ đó trên trang của bạn. Ví dụ này có thể được sử dụng thay cho (hoặc kết hợp với) nhãn biểu mẫu dựa trên văn bản

Danh sách chú giải công cụ thả xuống Bởi @devilsbackyard

Hiệu ứng thả xuống mượt mà và mượt mà này có thể được sử dụng cho các liên kết điều hướng hoặc thậm chí các chú giải công cụ nhỏ. Nó hoàn hảo cho mọi kiểu trang web hoặc cấu trúc bố cục

Thanh trượt radio hoạt hình của Marcos Scheeren

Mặc dù thanh trượt này cần được ghép nối với một số JavaScript để phục vụ mục đích sử dụng thực tế, nhưng hiệu ứng vẫn rất tuyệt vời khi chỉ được xây dựng trên CSS3

Góc gấp Bởi Rishabh Pugalia

Với hoạt hình CSS hiện đại, việc tạo các hiệu ứng có vẻ phức tạp như các góc gấp lại dễ dàng hơn bao giờ hết chỉ với một vài khối mã

Công cụ quay vòng CSS3 thuần túy Bởi Rishabh Pugalia

Công cụ quay vòng nội dung này được xây dựng với một thanh tải nhỏ và các hiệu ứng chuyển tiếp độc đáo giữa mỗi trang chiếu. Bạn có thể nhúng hình ảnh, video hoặc thậm chí iframe của các trang web khác vào băng chuyền

Những đám mây hoạt hình của Victor Knust

Cần một nền kiểu thị sai thú vị khác cho bố cục của bạn?

Công tắc & hộp kiểm tùy chỉnh Bởi Kushagra Agarwal

Đây là một bộ hộp kiểm, thanh trượt, công tắc bật/tắt tùy chỉnh khác và các tiện ích tương tự khác. Phong cách thiết kế có cảm giác kỹ thuật hơn nhưng vẫn kết hợp một số hiệu ứng hoạt hình CSS tuyệt vời