Ví dụ hoạt hình biểu tượng CSS

Là một nhà thiết kế, tôi thích bắt gặp những hình ảnh động vui nhộn khi truy cập một trang web và chắc chắn là tôi đã thấy chúng ngày càng nhiều hơn trong thời gian gần đây. Ảnh động đưa hình minh họa và biểu tượng lên một tầm cao mới, làm cho trang web trở nên hấp dẫn hơn nhiều. Mặc dù chúng rõ ràng là hấp dẫn khi nhìn vào nhưng chúng cũng phục vụ mục đích chức năng, thu hút khách truy cập và khuyến khích họ tương tác với nội dung

Tôi muốn thêm nhiều chi tiết thú vị này vào các thiết kế trang web của mình nhưng luôn nghĩ rằng nhiệm vụ này thuộc về nhóm phát triển nhiều hơn và tôi chưa thực sự nghĩ nhiều về việc tự mình tạo ra chúng. Ý tôi là, tôi chỉ là một nhà thiết kế với một chút kinh nghiệm viết mã, vì vậy tôi không thể xây dựng những phần tương tác này cho web, phải không? . Sau một số nghiên cứu, tôi đã học được cách tự viết mã cho một số hoạt ảnh của biểu tượng và nó thực sự dễ dàng hơn tôi nghĩ rất nhiều

Tôi muốn chia sẻ những gì tôi đã học được và quá trình thực hiện nó, cho phép tất cả các nhà thiết kế cảm thấy tự do hơn một chút trong việc đưa những sáng tạo của họ vào cuộc sống

Sử dụng CSS để tạo hiệu ứng cho các biểu tượng Web SVG

Tôi sẽ xem xét một số ví dụ thực tế về cách tôi đã mài giũa các kỹ năng mới của mình, tạo ba biểu tượng Dịch vụ đơn giản mà cuối cùng sẽ trông giống như thế này khi chúng hoạt ảnh

Mỗi biểu tượng sử dụng một kỹ thuật khác nhau, vì vậy chúng tôi sẽ chia nhỏ từng biểu tượng một

Biểu tượng Phát triển + Công nghệ

Biểu tượng này là biểu tượng đơn giản nhất trong bộ, vì vậy hãy bắt đầu từ đó. Nó bao gồm một màn hình máy tính và điện thoại thông minh dần dần tô sáng màu xanh lá cây, như thể chúng đang được bật nguồn

Chiều rộng của các khối màu xanh lá cây sẽ được làm động từ 0% đến 100%, tạo ảo giác về màn hình tràn ngập màu sắc. Để thực hiện điều này, tôi chỉ cần bỏ đoạn mã tiện lợi này ngay vào lớp svg dành cho màn hình máy tính

Mã svg của biểu tượng này cho chúng ta biết rằng độ sáng màn hình máy tính là 165. rộng 6px, vì vậy chúng tôi muốn đảm bảo rằng to=“#” khớp với chiều rộng đó. Chúng tôi cũng đã cho hoạt ảnh có thời lượng là 1. 75 giây. Làm điều tương tự cho điện thoại (nhưng với số chiều rộng khác) và thế là xong

Biểu tượng Tiếp thị + Phân tích

Trước khi tìm hiểu về biểu tượng này, hãy đọc bài viết tuyệt vời này giải thích mọi thứ bạn cần biết về stroke-dashoffset, đây là loại hoạt ảnh được sử dụng cho các đường biểu đồ

Sau khi xoay quanh vấn đề làm thế nào để tạo hiệu ứng cho các dòng, đã đến lúc biến điều kỳ diệu thành hiện thực. Tất cả những gì bạn phải làm là cung cấp cho mỗi thanh trong biểu đồ một độ trễ khác nhau để tạo ảo giác về biểu đồ đang phát triển. (Đảm bảo đánh số khác nhau cho mỗi thanh trong svg để chúng được phân biệt trong mã. )

Hoạt hình các đường biểu đồ thanh

Mã khung hình chính này tạo hoạt ảnh

 @keyframes offset { to { stroke-dashoffset:0;}}

Sau đó, chúng tôi áp dụng hoạt ảnh đó cho từng thanh trong biểu đồ

.bar-1, .bar-2, .bar-3, .bar-4, .bar-5, .bar-6, .bar-7 {
     stroke-dasharray: 150;
     stroke-dashoffset: 150;
     animation: offset 1s linear forwards}

Sau đó, chúng tôi cung cấp cho mỗi thanh thời gian trì hoãn hoạt ảnh hơi khác nhau để chúng bắt đầu lần lượt

.bar-1 { animation-delay: .4s;}
.bar-2 { animation-delay: .5s;}
.bar-3 { animation-delay: .6s;}
.bar-4 { animation-delay: .7s;}
.bar-5 { animation-delay: .8s;}



.bar-6 { animation-delay: .9s;}

Đó là tất cả cho các quán bar. Bây giờ đối với hoạt hình màu nền, chúng tôi sử dụng hiệu ứng mờ dần

Làm mờ màu nền của biểu đồ

Mã khung hình chính này tạo hoạt ảnh

@keyframes fadein {from { opacity: 0; }to  { opacity: 1; }}

Sau đó, chúng tôi áp dụng hình ảnh động đó để làm nổi bật biểu đồ

#graph-highlight { animation: fadein 2s forwards; opacity:0;}

Chúng tôi không cho màu hình chữ nhật bất kỳ độ trễ hoạt ảnh nào vì chúng tôi muốn hoạt ảnh bắt đầu ngay lập tức

Thật đơn giản, nhưng thật hiệu quả

Chiến lược + Biểu tượng thiết kế

Phức tạp nhất trong ba, ý ​​định của chúng tôi với những hình ảnh động này là làm cho biểu tượng trông giống như được vẽ bằng tay

Hoạt hình các dòng

Để tạo hoạt ảnh cho chữ X, hình tròn, đường mũi tên và đầu mũi tên, chúng tôi sử dụng hoạt hình nét gạch ngang

Mã khung hình chính này tạo hoạt ảnh

@keyframes offset { to { stroke-dashoffset:0;}}

Sau đó, chúng tôi áp dụng hoạt hình đó cho đường dẫn mũi tên, đầu mũi tên, vòng tròn và từng dòng của chữ X (vì mỗi chữ X thực sự bao gồm hai đường dẫn. )

arrow-path, arrow-head, .circle-1, .circle-2, .x-1a, .x-1b, .x-2a, .x-2b {
     stroke-dasharray: 150;
     stroke-dashoffset: 150;
     animation: offset 1s linear forwards}

Sau đó, chúng tôi cung cấp cho mỗi mục một thời gian trễ khác nhau để tạo sự quan tâm trong khi biểu tượng đang hoạt ảnh

Làm mờ màu nền

Để tạo hiệu ứng động cho màu bút chì và màu nền của vòng tròn, chúng tôi đã sử dụng hiệu ứng mờ dần

Mã khung hình chính này tạo hoạt ảnh

@keyframes fadein {from { opacity: 0; }to  { opacity: 1; }}

Sau đó, chúng tôi áp dụng hoạt hình đó cho các vòng tròn và màu bút chì

 @keyframes offset { to { stroke-dashoffset:0;}}

Sau đó, chúng tôi cung cấp cho mỗi mục một thời gian trễ khác nhau để tạo sự quan tâm trong khi biểu tượng đang hoạt ảnh

 @keyframes offset { to { stroke-dashoffset:0;}}

Và đó là nó

Học cách tiếp cận này không chỉ mang lại lợi ích cá nhân và hữu ích cho nhóm phát triển của chúng tôi, mà tôi nghĩ nó còn giúp khuyến khích tôi đẩy các thiết kế của mình đi xa hơn nữa. Việc kết hợp hoạt ảnh trở nên thú vị hơn bao giờ hết khi biết rằng tôi có thể (và sẽ. ) đưa chúng vào cuộc sống của riêng tôi. Tôi hy vọng bạn thấy điều này hữu ích và hãy cho chúng tôi biết nếu bạn có bất kỳ phương pháp, kỹ thuật hoặc mẹo yêu thích nào khác. hoạt hình vui vẻ

Làm cách nào để tạo hiệu ứng động cho hình ảnh trong CSS?

Làm cách nào để sử dụng hoạt ảnh khung hình chính trong CSS?