Hôm nay, bạn sẽ học cách sử dụng hoạt ảnh CSS để tạo biểu tượng SVG mũi tên nảy lên và xuống. Bạn cũng sẽ học cách điều chỉnh loại hoạt ảnh, thời gian và thời lượng với một số thuộc tính hoạt ảnh CSS.
Tại sao điều này hữu ích?
Hoạt ảnh, khi được thực hiện đúng, có thể:
- Hướng dẫn người dùng của bạn
- Khuyến khích người dùng của bạn thực hiện hành động
- Thu hút sự chú ý của người dùng (trong khi bạn vẫn có nó).
Yêu cầu
Bạn sẽ cần một trình soạn thảo văn bản để làm theo. Nếu bạn không có môi trường phát triển địa phương của riêng mình, tôi khuyên bạn nên sử dụng CodePen kể từ đó. Bạn có thể bắt đầu viết mã ngay lập tức.
Được rồi, bắt đầu thôi!
HTML:thêm vùng chứa &mũi tên
Để tạo lại ví dụ demo, bạn cần bốn phần tử HTML:
- Phần tử hình ảnh cho biểu tượng mũi tên
- Một phần tử span cho nhãn văn bản phía trên mũi tên
- Một phần tử vùng chứa-footer để bao quanh mũi tên và nhãn văn bản
- Một phần tử vùng chứa để bao quanh tất cả các phần tử
Đi tới trình chỉnh sửa HTML của bạn và thêm đánh dấu sau vào bên trong <body></body> của bạn phần tử:
<div class="container">
<div class="container-footer">
<span class="text-label">Explore</span>
<svg
class="arrow-circle-down bounce"
viewbox="0 0 1792 1792"
xmlns="https://www.w3.org/2000/svg"
>
<path
d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"
fill="#fff"
></path>
</svg>
</div>
</div>Mã mũi tên mà chúng tôi đã thêm ở trên có định dạng SVG. Nó dựa trên thư viện biểu tượng CSS Font Awesome.
Bạn có thể chọn giữa hàng trăm biểu tượng Font Awesome ở định dạng SVG từ repo GitHub này.
Tiết kiệm tài nguyên của bạn!
Nhiều trang web tải toàn bộ thư viện Font Awesome trên trang web của họ, nhưng họ chỉ sử dụng một số ít biểu tượng - điều đó gây lãng phí băng thông. Bạn có thể tiết kiệm nhiều tài nguyên bằng cách tải xuống 5-10 biểu tượng mà bạn thực sự cần ở định dạng SVG.
Đối với ví dụ này, chúng tôi đang nhúng trực tiếp tệp SVG vào đánh dấu HTML. Cách tiếp cận này được gọi là SVG nội tuyến. Có nhiều cách khác để thêm SVG cho các mục đích khác nhau - nhưng tôi sẽ lưu cách đó cho một hướng dẫn khác.
Tôi sử dụng biểu tượng SVG này trong hướng dẫn này.
Nếu bạn so sánh nguồn SVG ban đầu với nguồn bạn thấy trong đánh dấu HTML ở trên, bạn có thể thấy rằng tôi đã thực hiện một vài thay đổi:
- Tôi đã xóa các thuộc tính chiều rộng và chiều cao (tệp gốc quá lớn)
- Đã thêm một lớp:
arrow-circle-downmà chúng tôi sẽ cần trong phần CSS.
Được rồi, tiếp theo hãy thêm một chút kiểu dáng và sau đó chúng ta sẽ bắt đầu phần thú vị với hoạt ảnh CSS!
Tạo kiểu cho vùng chứa và mũi tên bằng CSS
Bên trong biểu định kiểu CSS của bạn, hãy thêm các bộ quy tắc sau (lớp, thuộc tính và giá trị):
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
background-color: #26a1ff;
height: 100vh;
}
.container-footer {
display: flex;
flex-direction: column;
align-items: center;
margin: auto auto 1rem auto;
}
.text-label {
text-transform: uppercase;
font-family: helvetica;
font-size: 0.75rem;
letter-spacing: 0.2em;
color: #fff;
}
.arrow-circle-down {
display: block;
width: 40px;
height: 40px;
margin: 16px 0;
}Bây giờ nếu bạn làm mới cửa sổ trình duyệt của mình, cửa sổ sẽ trông như thế này:
Điều gì đang xảy ra trong CSS:
- Đầu tiên, chúng tôi cung cấp
.containercủa phần tử div chính phân loại giá trị chiều cao là 100vh. Điều này làm cho nó chiếm toàn bộ khung nhìn, bất kể thiết bị nào. Chúng tôi sử dụngdisplay: flex;để biến nó thành một vùng chứa linh hoạt, mà chúng tôi sẽ cần cho mũi tên và nhãn văn bản. Chúng tôi cũng cung cấp cho nó màu nền xanh lam nhạt đẹp mắt. - Sau đó, chúng tôi cung cấp
.arrow-circle-downphân loại chiều rộng cố định và chiều cao là 40px để không chiếm quá nhiều dung lượng. Nó phải đáng chú ý, nhưng không gây mất tập trung. -
.text-labelcó một chút phong cách thẩm mỹ với thuộc tính chữ hoa và một số khoảng cách giữa các chữ cái. Vui lòng thay đổi tùy chọn này theo sở thích của riêng bạn. - Chúng tôi cung cấp
.container-footermột thuộc tính tự động đặt lề ở trên cùng, bên phải và bên trái. Điều này buộc chân trang vùng chứa và phần con của nó (biểu tượng &văn bản) ở cuối vùng chứa mẹ, đó là nơi chúng tôi muốn. Ký hiệu dưới cùng a1rem;để đảm bảo mọi thứ nằm trong khung nhìn khi mũi tên bật lên. -
.container-footerlớp cũng nhận được một vài thuộc tính flex,flex-direction: column;vàalign-items: center;. Các thuộc tính này làm cho các phần tử văn bản và biểu tượng xếp chồng lên nhau và căn chỉnh chủ đề một cách chính xác ở giữa chân trang vùng chứa.
Để làm rõ, margin: auto auto 1rem auto khai báo là một cách viết tắt hay để hiểu chi tiết hơn:
margin-top: auto;
margin-right: auto;
margin-bottom: 1rem;
margin-left: auto;Tiếp theo, đã đến lúc làm cho mũi tên của bạn nảy lên bằng hoạt ảnh CSS!
Tạo hiệu ứng cho mũi tên cuộn xuống bằng CSS
Có nhiều cách để tạo hoạt ảnh, cả với CSS, JavaScript và kết hợp. Đối với ví dụ này, chúng tôi sẽ tạo hoạt ảnh hoàn toàn bằng CSS.
Chúng tôi đã thêm một .bounce lớp vào phần tử hình ảnh có chứa mũi tên SVG. Cho đến nay, nó không làm được gì vì chúng tôi chưa định nghĩa hoặc tạo kiểu cho lớp trong CSS.
Thêm phần sau vào biểu định kiểu CSS của bạn:
.bounce {
animation: bounce 2s;
}
@keyframes bounce {
0%,
25%,
50%,
75%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-12px);
}
}Và bây giờ, bạn có một mũi tên bật lên:
Điều gì đang xảy ra trong mã CSS
Trên phần tử SVG với mũi tên của chúng ta, chúng ta có một lớp được gọi là .bounce . Lớp này có thuộc tính là animation .
Thuộc tính hoạt ảnh có hai giá trị, bounce và 2s .
bounce value là một hàm kích hoạt hoạt ảnh @keyframe @keyframes bounce mà tôi sẽ đến trong giây lát.
2s giá trị (hai giây) là tổng thời gian mà hoạt ảnh @keyframe của chúng tôi sẽ chạy.
Hoạt ảnh @keyframe:
- Có tổng thời lượng là hai giây (do thuộc tính
animation property.) - Có tổng cộng bảy khung hình chính khác nhau. 0%, 25%, 40% 50%, 60% 75% và 100%.
- Có ba vị trí tọa độ Y khác nhau:Y (0), Y (-20px) và Y (-12px). Các tọa độ này là thứ quyết định liệu phần tử mũi tên di chuyển lên hay xuống tại các điểm khác nhau (khung hình chính) trong thời gian.
Khối @keyframe đầu tiên {..} cho biết chính xác năm khung hình chính này:0%, 25%, 50%, 75% và 100%, - mũi tên phải ở vị trí bắt đầu, là Y (0px).
0%,
25%,
50%,
75%,
100% {
transform: translateY(0);
}Khối @keyframe thứ hai nói rằng ở mốc 40%, mũi tên sẽ di chuyển lên, bằng cách đặt nó ở vị trí Y (-20px).
40% {
transform: translateY(-20px);
}Khối khung hình chính thứ ba nói rằng ở mốc 60%, mũi tên sẽ di chuyển lên một lần nữa. Lần này, chúng tôi chỉ di chuyển mũi tên lên khoảng một nửa so với lần đầu tiên, bằng cách đặt nó ở vị trí Y (-12px).
60% {
transform: translateY(-12px);
}Lưu ý rằng ở giữa hai khung hình chính nơi mũi tên di chuyển lên (40% và 60%) nó di chuyển trở lại Y (0) ở khung hình chính 50%. Đó là điều khiến mũi tên di chuyển lên và xuống hai lần, tương đối nhanh trong một khoảng thời gian ngắn.
Tôi quyết định chỉ di chuyển mũi tên bằng -12px ở vị trí thứ ba vì nó bắt chước một quả bóng nảy ngoài đời thực. Quả bóng chạm đất lần thứ hai rơi xuống nó sẽ di chuyển lên ít hơn lần đầu. Quả bóng nảy bao nhiêu (và độ cao bao nhiêu) tất nhiên được xác định bởi nhiều yếu tố, như trọng lượng, tốc độ, loại vật liệu, v.v. nhưng điều đó chỉ mang lại cho chúng ta nhiều khoảng trống hơn, vì không có một cách để làm điều đó.
Nếu CSS cho hoạt ảnh khó hiểu, hãy thử làm rối với thời lượng và CSS chuyển đổi dịch bất động sản. Với một chút thực hành, việc kết nối các điểm sẽ dễ dàng hơn nhiều.
- Cố gắng cung cấp cho khung hình chính 40% thuộc tính dịch chuyển đổi là -48px và xem điều gì sẽ xảy ra.
- Cố gắng cung cấp CSS
animationthuộc tính thời lượng là 5 giây thay vì 2. Sau đó, hãy thử đặt giá trị đó là 100 mili giây (bạn có thể sử dụng mili giây thay vì giây).
Thường sẽ dễ dàng hơn để lái một mẫu concept về nhà nếu bạn thử nghiệm với các điểm cực đoan. Đó thường là nơi tôi có những khoảnh khắc "aha" của mình.
Thử nghiệm!
Hoạt ảnh CSS có vô số khả năng. Hãy xem qua một số biến thể mà chúng tôi có thể thực hiện cho hoạt ảnh hiện có của mình.
Thuộc tính animation-delay
Ngay bây giờ, mũi tên của bạn sẽ nảy ngay sau khi trang web của bạn được tải. Bạn có thể muốn trì hoãn một chút để người dùng không bị phân tâm trong vòng vài giây sau khi truy cập trang web của bạn.
Bạn có thể làm điều đó bằng cách thêm animation delay thuộc tính .bounce của bạn lớp học, như thế này:
.bounce {
animation: bounce 2s;
animation-delay: 5s;
}Giờ đây, hoạt ảnh khung hình chính dài hai giây của bạn sẽ không bắt đầu chạy cho đến đúng năm giây sau khi trang của bạn được tải.
Thuộc tính đếm số lần lặp lại hoạt ảnh
Đôi khi bạn muốn lặp lại một hoạt ảnh một vài lần. Để lặp lại hoạt ảnh, chúng tôi sử dụng animation-iteration-count tài sản, như thế này:
.bounce {
animation: bounce 2s;
animation-delay: 5s;
animation-iteration-count: 2;
}Bây giờ, mũi tên của bạn bắt đầu nảy sau năm giây, nhưng lần này nó lặp lại hoạt ảnh khung hình chính một lần nữa.
Hoạt ảnh CSS vô hạn
Đôi khi, trong một số trường hợp hiếm hoi, bạn muốn hoạt ảnh CSS chạy vô hạn. Để làm điều đó, bạn thay đổi số lần lặp lại hoạt ảnh thành infinite; như thế này:
.bounce {
animation: bounce 2s;
animation-iteration-count: infinite;
}Nhưng hãy cẩn thận với những hình ảnh động vô hạn. Không ai thích những hình ảnh động xoay vòng mãi.
Một ngoại lệ sẽ là nếu bạn có một số loại phông nền không gian sống với một loạt các ngôi sao nhỏ với hình ảnh động nhấp nháy tinh tế. Bạn có thể muốn lặp lại / lặp lại một hoạt ảnh cho loại mục đích đó, để giữ cho bầu không khí năng động.
Trình sửa lỗi tự động
Để làm cho mã này hoạt động trong tất cả các trình duyệt hiện đại, bạn nên sử dụng trình sửa lỗi tự động. Tôi không thêm chúng vào mã ở đây vì tôi muốn giữ mã ngắn hơn và dễ đọc hơn. Nếu bạn truy cập CodePen này, bạn có thể nhận được tất cả mã, bao gồm các thuộc tính có tiền tố.
Tài nguyên hoạt ảnh CSS
- Tài liệu Web MDN:Hoạt ảnh CSS