Thêm hình ảnh động UI vào trang web của bạn

Sep 16, 2025

Cách

Hầu hết mọi người thấy giao diện người dùng hàng ngày, cho dù đó là bên trong một ứng dụng di động hoặc trên trang web, vì vậy điều quan trọng là phải có được ngay khi tạo chúng (a người tạo ra trang web sẽ làm cho đơn giản này cho bạn), và nếu bạn có thể làm sống động chúng với một số Hoạt hình CSS. , tất cả tốt hơn.

Khám phá biên giới mới của hoạt hình CSS

Trong khi xây dựng trên web, đặc biệt là khi nói đến hoạt hình, bạn phải xem xét những thứ như hỗ trợ trình duyệt và hiệu suất (đàng hoàng web hosting sẽ giúp ở đây). Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn qua hai trong số các giải pháp tốt nhất để tạo hoạt hình UI và chuyển tiếp.

Chúng tôi sẽ sử dụng sự kết hợp của CSS và Greensock. (GSAP). Tất cả chúng ta đều biết về CSS nhưng một số bạn có thể không nhận thức được nền tảng Greensock. Greensock là một khung JavaScript cho phép bạn dễ dàng tạo hoạt hình tuyệt đẹp với các yếu tố HTML chỉ bằng một vài dòng mã.

Hình ảnh và logo đã đặc biệt nổi bật hơn rất nhiều trong vài năm qua. Làm thế nào thường xuyên chúng ta sử dụng biểu tượng cảm xúc chứ không phải văn bản? Điều hướng di động dường như sử dụng các biểu tượng thay vì văn bản và thời gian người dùng đến khi biết mỗi người sẽ đưa chúng ta đến đâu. Chúng tôi sẽ bắt đầu bằng cách tạo một thanh điều hướng hoạt hình chỉ bằng logo. Khi bạn di chuột qua từng người, nó sẽ hoạt hình với trạng thái cuối cùng, sẽ trông giống với ảnh chụp màn hình này. Có rất nhiều phương tiện truyền thông để thêm? Trở lại lưu trữ đám mây .

UI animations: icons — Chúng tôi có sáu biểu tượng điều hướng và một trong số chúng thể hiện trạng thái hover sẽ trông như thế nào khi hoạt hình được hoàn thành

Xây dựng điều hướng

Trước hết, chúng tôi sẽ tạo một tệp index.html mới và thiết lập khu vực điều hướng của chúng tôi cùng với sáu liên kết. Mỗi liên kết sẽ được tạo thành từ một biểu tượng được lấy từ Ionicons. Chúng tôi sẽ cần phải chỉ định một lớp học cho mỗi.

 & lt; div class = "thanh điều hướng" & gt;
& lt; a href = "#" class = "Navlogo Ion-iOS-Star-Outline" & GT; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-ass-Outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "Navlogo Ion-iOS-chat-Outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "Navlogo Ion-iOS-Outline" & GT; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-pie-Outline" & GT; & lt; / a & gt;
& lt; a href = "#" class = "Navlogo Ion-iOS-Gear-Outline" & GT; & lt; / a & gt;
& lt; / div & gt;

Chúng tôi sẽ không bao gồm chi tiết tài liệu HTML hoặc CSS đầy đủ nhưng bạn có thể Nhận danh sách đầy đủ mã từ GitHub .

Tiếp theo, chúng tôi sẽ cần tạo một tệp CSS được gọi là style.css và sau đó chèn dòng mã sau để nhập Ionicons:

 @Import URL (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

Bây giờ chúng tôi sẽ thiết lập lớp học NAVLOGO. Đối với hình ảnh điều hướng của chúng tôi bên trong biểu định kiểu. Ở đây chúng tôi sẽ thiết lập vị trí, chiều cao, kích thước phông chữ, vv

 .navlogo {
  Chức vụ: Người thân;
  Kích thước phông chữ: 40px;
  Chiều rộng: 75px;
  Biên độ: 40px;
  Chiều cao: 75px;
  chiều cao dòng: 75px;
  Hiển thị: Khối nội tuyến;
  Màu sắc: #fff;
Không thể

.navlogo: sau {
  Vị trí: Tuyệt đối;
  Top: 0;
  Đáy: 0;
  Trái: 0;
  Phải: 0;
  Biên giới: 2px Solid # E6E6E6;
  Nội dung: '';
  Z-Index: -1;
  bán kính biên giới: 50%;
}

Tiếp theo, chúng ta cần thiết lập hình ảnh động cho chúng ta .navlogo. thành phần. Ở đây chúng ta sẽ tạo các hiệu ứng xoay và chuyển đổi, cũng như thay đổi màu phần tử trên di chuột.

 .navlogo: trước,
.navlogo: sau {
  -webkit-Transition: tất cả 0,45 lần dễ dàng vào;
  Chuyển đổi: tất cả 0,45 dễ dàng vào;
Không thể
.navlogo: lơ lửng,
.navlogo: Hoạt động,
.navlogo.hove {
  Màu sắc: # C0392B;
Không thể
.navlogo: di chuột: sau,
.navlogo: Hoạt động: Sau,
.navlogo.hove: sau {
  Border-Color: Trong suốt # C0392B;
  -webkit-Biến đổi: Xoay (360deg);
  Biến đổi: Xoay (360deg);
}

Cuối cùng, chúng ta sẽ cần thêm một sự kiện để loại bỏ lớp lưu trú ẩn khi chuột không còn lơ lửng trên logo của chúng ta. Điều này là để đảm bảo rằng logo của chúng tôi xuất phát từ hoạt hình của nó. Tạo một tệp JavaScript mới có tên main.js và sau đó nhập mã sau:

 $ (". Hover"). Mouseleave (
  chức năng () {
    $ (cái này) .removeclass ("di chuột");
  Không thể
);

Điều hướng của chúng tôi đã sẵn sàng để đi, ngoài việc thêm một số siêu liên kết. Chúng tôi đã quản lý để đạt được điều này chỉ bằng cách sử dụng CSS3.

Tạo và hoạt hình các nút trên tải

UI animations: animated buttons — Các nút sẽ xuất hiện từng cái một với độ trễ một giây ở giữa. Greensock cho phép bạn thực hiện việc này với bất kỳ yếu tố HTML nào

Bây giờ chúng tôi sẽ thêm bốn nút vào trang của chúng tôi và sử dụng thư viện Greensock để từ từ đưa vào mỗi nút, từng nút khác với độ trễ một giây. Điều này sẽ tạo ra một hiệu ứng chuyển tiếp tốt đẹp.

Đầu tiên, chúng ta sẽ cần mở lại tệp index.html và tạo phần nút của chúng tôi bằng mã bên dưới:

 & lt; div id = "buttrea" & gt;
& lt; nút lớp = "anbindton" & gt; thay đổi màu nền & lt; / nút & gt;
& lt; nút lớp = "anbindton" & gt; tùy chọn 1 & lt; / nút & gt;
& lt; nút lớp = "anbindton" & gt; tùy chọn 2 & lt; / nút & gt;
& lt; nút lớp = "anbindton" & gt; tùy chọn 3 & lt; / nút & gt;
& lt; / div & gt;

Sau đó, chúng tôi cần thiết lập một tham chiếu đến Thư viện Greensock bên trong & LT; Head & GT; phần.

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt; & lt;

Cuối cùng, chúng ta cần thiết lập hoạt hình của chúng tôi. Điều này sẽ chỉ mất một dòng mã. Soggerfrom. là một chức năng sẽ sogger thời gian bắt đầu của yếu tố của chúng tôi. Trong ngoặc của chúng tôi, chúng tôi chỉ định tên của phần tử. Trong trường hợp này, nó sẽ là .Anibutton. . Chúng ta cũng cần thiết lập một thời gian và trong trường hợp này, nó được đặt thành một giây giữa mỗi anbindton. thành phần.

 tweenmax.stagherfrom ('. Anbindton', 1, {Opacity: 0}, 1);

Bối cảnh và phần tử chuyển đổi màu sắc

UI animations: colour transition — Đây là cách UI sẽ chăm sóc sau nền và chuyển đổi nút từ màu này sang màu khác

Điều tiếp theo chúng ta sẽ xem xét đang chuyển nền trang web và các nút từ màu này sang màu khác. Chúng ta không thường xuyên gặp phải tính năng này trên các trang web, mặc dù nó chắc chắn sẽ thú vị đối với những thứ như khả năng truy cập hoặc cho các tùy chọn ứng dụng web khi người dùng có thể muốn đặt bảng màu của riêng họ.

Đảm bảo rằng bạn có màu nền và viền viền và văn bản được thiết lập cho trang của mình trong tệp style.css.

 .anibutton {
Biên giới: 2px Solid # 000;
Màu sắc: # 000;
}

Tiếp theo, chúng tôi sẽ tạo một hàm JavaScript để thiết lập các chuyển đổi màu Greensock khác nhau của chúng tôi.

 Chức năng thay đổi ()
Đồn là
   Tweenmax.to ("body", 3, {inbur nền: "gradient tuyến tính (sang trái, # 646580, # 212121)"});
   Tweenmax.to (". Anbindton", 3, {color: "# fff"});
   Tweenmax.to (". Anbindton", 3, {Border: "2px Solid #fff"});
}

Chúng tôi đang đi cho nhiều chế độ tối nhìn ở đây, do đó, nền sẽ tối nhưng các nút sẽ xuất hiện ánh sáng. Dòng mã đầu tiên sẽ thay đổi màu nền thành một biến thể tối hơn trong khoảng thời gian ba giây. Dòng thứ hai và thứ ba sẽ thay đổi màu sắc và đường viền của văn bản thành Trắng trong khoảng thời gian ba giây.

Cuối cùng, chúng ta sẽ cần gọi Thay đổiground () Chức năng từ một trong các nút của chúng tôi được tìm thấy trong tệp index.html.

 & lt; nút lớp = "anbindton" onclick = "changebackground ()" & gt; thay đổi nền & lt; / nút & gt;

Dự án đã sẵn sàng để chạy. Tất nhiên, bạn có thể đi xa hơn nhiều bằng cách thêm các yếu tố mới và cũng thay đổi kiểu màu cho những người đó.

Bài viết này ban đầu được xuất bản trong số phát hành 309 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số phát hành 309 tại đây hoặc là Đăng ký tại đây .

Những bài viết liên quan:

Animate và chuyển đổi tiêu đề với CSS
5 mẹo cho CSS siêu nhanh
Giới thiệu về tính chất tùy chỉnh CSS

Thêm hình ảnh động UI vào trang web của bạn

Xây dựng điều hướng

Tạo và hoạt hình các nút trên tải

Bối cảnh và phần tử chuyển đổi màu sắc

Cách - Các bài báo phổ biến nhất

Tạo hiệu ứng nền thị sai được điều khiển bằng chuột

Cách nén hình ảnh: Hướng dẫn của người thiết kế web

Cách vẽ một người

Xây dựng một cảnh khoa học 3d phức tạp trong Blender

Mô hình thủ tục tổng thể

Tạo một hiệp sĩ tưởng tượng thực tế

Master the Dao Tool

Bậc thầy bức tranh âm tính trong màu nước

Thể loại