Logo hoạt hình - CSS codepen

Một lĩnh vực đã có nhiều thử nghiệm gần đây là sử dụng CSS để thiết kế hoàn chỉnh hoặc nâng cao tác phẩm nghệ thuật. Ví dụ, các nhà thiết kế đã cố gắng tái tạo các nhân vật nổi tiếng với kết quả ấn tượng

Tương tự, chúng ta cũng thấy một số logo rất thú vị được tạo bằng CSS, cùng với một lượng lớn JavaScript và SVG được đưa vào để đo lường hiệu quả. Họ cùng nhau cung cấp một mức độ linh hoạt mà các định dạng khác không có

Chúng ta hãy xem mười ví dụ về biểu trưng được tạo bằng sự kết hợp của CSS, JavaScript và SVG. Một số là bản gốc, một số khác là từ các thương hiệu nổi tiếng. Tất cả đều đáng khâm phục

Pháo hoa hoạt hình của Julian Garnier

phim hoạt hình này. js logo animation sử dụng kết hợp CSS và [tất nhiên] JS để tạo logo hoạt hình đầy màu sắc và sống động. Không chỉ có hoạt ảnh giới thiệu thú vị mà các lần nhấp tiếp theo vào biểu tượng sẽ phát ra nhiều pháo hoa hơn. Đó là loại gây nghiện

xem phim hoạt hình cây bút. js logo hoạt hình của Julian Garnier

Mở rộng quy mô dễ dàng của Hugo Darby-Brown

Một lợi thế thú vị của việc sử dụng CSS cho logo của bạn là khả năng chia tỷ lệ để khớp với bất kỳ kích thước nào – giống như tệp SVG. Biểu trưng mẫu bên dưới cho Shop Talk cho thấy tỷ lệ CSS hoàn hảo đến từng pixel, ngay bên cạnh một PNG không thể theo kịp

Xem logo Pen Shop Talk được tạo bằng CSS bởi Hugo Darby-Brown

Chữ viết tay của Grey Ghost

Mẫu này lâu rồi nhưng vẫn đẹp. Văn bản chữ viết của logo được tiết lộ như thể nó được viết tay trên màn hình. Nó đơn giản nhưng hiệu quả

Xem Bút Faithmade. Logo hoạt hình của GRAY GHOST

Mở & Đóng bởi Marco Barría

Mặc dù logo màu trắng này trông tuyệt vời trên nền nhiều màu, nhưng viên ngọc thực sự ở đây là chức năng phát/đảo ngược được tích hợp sẵn. Nhấn “play” sẽ làm cho logo xuất hiện thông qua một hình ảnh động bóng bẩy, trong khi nhấn ngược lại [bạn đoán nó] sẽ thực hiện ngược lại toàn bộ quá trình. Điều này có thể hữu ích trong các tình huống, chẳng hạn như bạn muốn biểu thị việc đóng một phần tử

Xem Logo Bút của Marco Barría

Chrome nguyên chất của Mike King

Đây là phiên bản trung thực của logo Chrome, được thực hiện bằng CSS thuần túy và trong một thành phần HTML duy nhất. Nó cho thấy có thể đạt được bao nhiêu với CSS về mặt tạo giao diện liền mạch và các hình dạng phức tạp. Hiệu ứng di chuột quay cũng là một nét đẹp

Xem Biểu trưng Google Chrome yếu tố bút đơn của Mike King

Trong ánh đèn sân khấu của Nikk Tifan

Di chuột vào một trong các biểu tượng trong bút này sẽ tạo hiệu ứng "đèn chiếu" trên khu vực ngay lập tức của con trỏ của bạn. Nó thêm một yếu tố thú vị và khuyến khích sự tương tác

Xem Pen Z24 Logo Animation của Nikk Tifan

Hiệu ứng vẽ độc đáo của Cody

Ví dụ này nổi bật ở một vài cấp độ. Đầu tiên, hoạt ảnh đưa logo từ một loại bản vẽ kỹ thuật đến thành phẩm rất thú vị khi xem. Thứ hai, nền gradient hoạt hình tinh tế bổ sung hoàn hảo cho toàn cảnh

Xem Pen Animating Gradient với CSS của Cody

Logo tối giản nhưng thú vị của Melissa Cabral

Được rồi, tối thiểu và thú vị thường không được đề cập cùng nhau. Nhưng trong trường hợp này – nó phù hợp. Logo đơn giản này với nền cầu vồng gồm các khối hoạt hình làm tăng thêm cá tính cho một thứ gì đó khá đơn điệu

Xem Logo bút của Melissa Cabral

Kể một cách tế nhị một câu chuyện của Sam Chahine

Hoạt hình là một trong những mốt lớn trong logo, nhưng đôi khi nó có thể hơi quá. Điều làm cho ví dụ này trở nên tuyệt vời là hoạt hình mở đầu cuốn sách được thương hiệu khen ngợi mà không làm quá

Xem Biểu trưng Pen Learnosity của Sam Chahine

Logo có thể làm được nhiều hơn

Trong nhiều năm, chúng tôi đã sử dụng logo như một nguồn tài nguyên chủ yếu là tĩnh. Nhưng khi bạn kết hợp sức mạnh của CSS, JavaScript và SVG, logo có thể trở thành nơi chúng ta có thể thêm một số tương tác thực sự. Và tương tác với một logo về bản chất là tương tác với một thương hiệu

Vì vậy, đây không chỉ là một cách thực hành để thêm một tính năng thú vị khác vào trang web của bạn – mà còn là một bài tập để nâng cao nhận thức về thương hiệu.

After Effects là bộ hoạt hình phổ biến nhất, nhưng CSS và JavaScript đang nhanh chóng trở thành lựa chọn hấp dẫn nhất cho đồ họa chuyển động trong trình duyệt

Các đoạn mã miễn phí này được lưu trữ trên CodePen thể hiện những khả năng mới nhất trong thế giới hoạt hình web giao diện người dùng. Hãy xem qua danh sách và nếu bạn muốn tìm hiểu thêm, bạn có thể tìm nguồn đầy đủ cho tất cả các dự án này trên các trang CodePen tương ứng của chúng

Màn hình tải lăng kính

NodeJS

Logo thủ thuật CSS

Biểu trưng Skype

Bong bóng suy nghĩ

phụ

ngang hàng

Biểu trưng đa giác

Bộ đồ & Rìu

Trillectro

Logo phòng thí nghiệm nhị phân

Biểu trưng Hộp thư đến của Google [CSS thuần túy]

Đang tải trên Google

Loại tìm kiếm

Hoạt hình Netflix [CSS thuần túy]

1. Hoạt hình xem CSS thuần túy

Hoạt hình xem CSS thuần túy của Grzegorz Witczak [@Wujek_Greg]

Đây là một ví dụ đáng yêu về việc kết hợp chuyển đổi CSS [xoay và dịch] để định vị kim và chỉ báo ngày/đêm trên mặt đồng hồ thời trang

2. CSS Submarine 

Hoạt ảnh tàu ngầm với CSS trong CodePen của Alberto Jerez [@ajerez]

Việc sử dụng tuyệt đẹp thùng chứa hình lỗ cảng tròn mang lại cho chiếc tàu ngầm hoạt hình CSS này rất nhiều sức hấp dẫn

3. ASCII AT-AT

AT-AT của Tim Pietrusky [@TimPietrusky]

Tàu sân bay nhân sự AT-AT lấy cảm hứng từ Chiến tranh giữa các vì sao, được vẽ bằng văn bản với màu sắc được luân chuyển trong CSS. Đó là một CSS hoạt hình hình ảnh thú vị được tìm thấy trên CodePen

4. Trình tải SVG/CSS

Trình tải SVG/CSS của Bidji [@Bidji]

Trình tải này sử dụng màu sắc thay đổi để tạo ấn tượng xoay. Đó là một hình ảnh động đơn giản nhưng thú vị trong CSS được tìm thấy trên CodePen

5. Gói CSS 3D

CSS 3D Tardis của Gerwin van Royen [@Gerwinnz]

CSS có thể được sử dụng để tạo một số hiệu ứng 3D tuyệt vời. Đây là hoạt hình tardis 3D được tìm thấy trên CodePen

6. Con chim ngủ gật

Con chim ngủ gật của Peter Klein [@pmk]

Phong cách nghệ thuật đơn giản và số lượng hoạt hình vừa phải mang đến cho chú chim buồn ngủ này ảo giác về cuộc sống

7. Hoạt hình đường viền CSS thuần túy

Hoạt ảnh đường viền CSS thuần túy không có SVG của Rplus [@rplus]

Sử dụng đơn giản nhưng rất hiệu quả các đường viền CSS để tạo hoạt ảnh kiểu tải

8.  Chiến tranh giữa các vì sao. Sức mạnh thức tỉnh

Chiến tranh giữa các vì sao. Thần lực thức tỉnh trong CSS của Donovan Hutchinson [@donovanh]

Bộ ba phim mới nhất từ ​​loạt phim Chiến tranh giữa các vì sao có những lời gièm pha. Nhưng hoạt hình này sử dụng CSS, HTML và một chút JavaScript sẽ không có gì ngoài người hâm mộ

9. Tổng hợp 3D

Pure CSS 3D Synthesizer [di chuột xuống để xoay] của Nikolay Talanov [@suez]

Hãy dùng thử các phím và xoay hoạt ảnh tổng hợp 3D này được tạo bằng CSS và được chia sẻ trên CodePen. Công việc tuyệt vời

10. Hệ mặt trời xếp tầng

Hệ mặt trời xếp tầng. bởi Tady Walsh [@tadywankenobi]

Một mô hình hệ mặt trời của chúng ta, hoàn chỉnh với tốc độ quay theo tỷ lệ, các mặt trăng và chi tiết về từng hành tinh lớn hơn. Mặt trời thậm chí còn được chụp trực tiếp từ thực tế

11. CSS Hệ mặt trời 3D

Hệ mặt trời CSS 3D đầy đủ của Julian Garnier [@juliangarnier]

Một hình ảnh động khác về hệ mặt trời trên CodePen, nhưng lần này là ở dạng 3D. Sử dụng đẹp của bóng

12. Máy ảnh thiết kế phẳng

Máy ảnh thiết kế phẳng với hoạt ảnh CSS trên CodePen của Damien Pereira Morberto [@damienpm]

Nhấn nút chụp trên máy ảnh phẳng này để xem nó tạo ảnh bằng hoạt ảnh CSS

13. Chuyển đổi ngày và đêm

Mô phỏng Ngày Đêm của Szymon Stypa [@Catagen]

Nhấn nút để xem ngày chuyển thành đêm

14. Sprite hoạt hình bằng CSS

Hoạt ảnh sprite bằng CSS của Avaz Bokiev [@samarkandiy]

Trình diễn cách sử dụng một chuỗi hình ảnh [sprite] để tạo hoạt ảnh chuyển động dừng, hoàn chỉnh với chuyển động tiến và lùi. Bỏ chọn hộp kiểm và sử dụng các nút mũi tên để xem từng khung di chuyển

15. Khối mười hai mặt

Hoạt hình hình ảnh khối mười hai mặt trong CSS của wontem [@wontem]

Trên CodePen, hãy tìm khối mười hai mặt đẹp, tinh tế này được tạo và hoạt ảnh hoàn toàn bằng CSS

Ảnh động CSS trên Envato Market

Bạn sẽ tìm thấy rất nhiều hoạt ảnh tuyệt vời trên CodePen. Hoạt hình CSS cũng là một danh mục đang phát triển trên Envato Market. Nếu bạn muốn sử dụng các hiệu ứng hoạt hình trong các dự án của mình, bạn có thể tìm thấy mọi thứ từ bóng tối đến hiệu ứng di chuột trên hình ảnh, hộp đèn, v.v.

Phần kết luận

Cách đây không lâu, chúng tôi đã dựa vào các công cụ Flash hoặc JavaScript cho bất kỳ hoạt ảnh nào trong trình duyệt. Các trình duyệt hiện đại đã hỗ trợ tốt hơn cho CSS, với 3D và hoạt ảnh được tăng tốc phần cứng.  

Nhờ các trang web như CodePen, chúng ta có thể chia sẻ và học hỏi dễ dàng hơn bao giờ hết. Một số bản trình diễn hoạt hình truyền cảm hứng nhất mà bạn đã xem gần đây là gì?

• 10 ví dụ về hoạt ảnh trên CodePen mà bạn có thể học hỏi

  CodePen là một nơi tuyệt vời để tìm cảm hứng và xem thử nghiệm giao diện người dùng điên rồ nào mà những người khác đang nghĩ ra. Ngoài ra, đây cũng là một nơi hữu ích để tìm

  Donovan Hutchinson27 tháng 2 năm 2017

  hoạt hình

Học CSS. Hướng dẫn hoàn chỉnh

Các hoạt ảnh CSS CodePen này có khiến bạn quan tâm đến việc tự làm một cái không?