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
________số 8_______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;}}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;}}1
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ẻ