ví dụ 1. Trong ví dụ này, chúng ta sẽ di chuyển phần tử HTML div theo một đường tròn. Hoạt hình xoay phần tử ở 360 độ trong bản dịch 100px và tạo một đường tròn
HTML
2
6_______56_______7
6_______56_______9
2
1
html
1____58_______6
html
1>
6
"en"
8>
8
>
0
0
html
1____58_______6
6_______58_______6
2
img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
2. [Tôi sẽ bỏ qua phần hình học cung cấp cho chúng ta phương trình đó. ]
Hãy viết một số CSS
Chúng tôi sẽ sử dụng CSS Grid để đặt tất cả các hình ảnh trong cùng một khu vực chồng lên nhau
.gallery {
--s: 280px; /* control the size */
display: grid;
width: var[--s];
aspect-ratio: 1;
padding: calc[var[--s] / 20]; /* we will see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
Không có gì quá phức tạp cho đến nay. Phần khó khăn là hình ảnh động
Chúng ta đã nói về việc xoay một vòng tròn lớn, nhưng trên thực tế, chúng ta sẽ xoay từng hình ảnh riêng lẻ để tạo ảo giác về một vòng tròn lớn đang xoay. Vì vậy, hãy định nghĩa một hoạt ảnh,
.gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
3 và áp dụng nó cho các thành phần hình ảnh.gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
Thủ thuật chính dựa vào dòng được đánh dấu đó. Theo mặc định, thuộc tính CSS
.gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
4 bằng với .gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
5 [hoặc .gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
6] làm cho hình ảnh xoay quanh tâm của nó, nhưng chúng tôi không cần nó để làm điều đó. Chúng tôi cần hình ảnh xoay quanh tâm của vòng tròn lớn chứa hình ảnh của chúng tôi, do đó, giá trị mới cho .gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
4Vì R bằng với
.gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
2, nên chúng ta có thể nói rằng .gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
0 bằng với .gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
0 của kích thước hình ảnh. Đây là một con số để minh họa cách chúng tôi nhận được giá trị .gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
1Hãy chạy hoạt hình và xem điều gì sẽ xảy ra
Dự phòng nhúng CodePen
Tôi biết rồi mà. Kết quả khác xa với những gì chúng ta mong muốn, nhưng thực tế chúng ta đã rất gần. Có vẻ như chỉ có một hình ảnh ở đó, nhưng đừng quên rằng chúng tôi đã xếp chồng tất cả các hình ảnh lên nhau. Tất cả chúng đang quay cùng một lúc và chỉ có hình ảnh trên cùng là hiển thị. Những gì chúng ta cần là trì hoãn hoạt ảnh của từng hình ảnh để tránh sự chồng chéo này
.gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
Mọi thứ đã trở nên tốt hơn
Dự phòng nhúng CodePen
Nếu chúng tôi ẩn phần tràn trên vùng chứa, chúng tôi đã có thể thấy một thanh trượt, nhưng chúng tôi sẽ cập nhật hoạt ảnh một chút để mỗi hình ảnh vẫn hiển thị trong một khoảng thời gian ngắn trước khi nó di chuyển
Chúng tôi sẽ cập nhật các khung hình chính hoạt hình của mình để làm việc đó
@keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
Đối với mỗi
.gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
2 [.gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
3, trong đó .gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
4 là số lượng hình ảnh], chúng tôi sẽ thêm một khoảng dừng nhỏ. Mỗi hình ảnh sẽ vẫn hiển thị trong khoảng thời gian tổng thể là .gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
5 trước khi chúng tôi chuyển sang hình ảnh tiếp theo [.gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
6, .gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
7, v.v. ]. Tôi sẽ cập nhật .gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
8 bằng cách sử dụng hàm .gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
9 để làm cho hoạt ảnh đẹp hơn một chútDự phòng nhúng CodePen
Bây giờ thanh trượt của chúng tôi là hoàn hảo. Chà, gần như hoàn hảo vì chúng tôi vẫn đang bỏ lỡ bước cuối cùng. đường viền tròn đầy màu sắc xoay quanh hình ảnh của chúng tôi. Chúng ta có thể sử dụng phần tử giả trên trình bao bọc
@keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
0 để làm cho nó.gallery {
padding: calc[var[--s] / 20]; /* the padding is needed here */
position: relative;
}
.gallery::after {
content: "";
position: absolute;
inset: 0;
padding: inherit; /* Inherits the same padding */
border-radius: 50%;
background: repeating-conic-gradient[#789048 0 30deg, #DFBA69 0 60deg];
mask:
linear-gradient[#fff 0 0] content-box,
linear-gradient[#fff 0 0];
mask-composite: exclude;
}
.gallery::after,
.gallery >img {
animation: m 8s infinite cubic-bezier[.5, -0.2, .5, 1.2];
}
Tôi đã tạo một vòng tròn có nền trong khi sử dụng thủ thuật tạo mặt nạ chỉ hiển thị vùng đệm. Sau đó, tôi áp dụng cho nó cùng một hoạt ảnh mà chúng tôi đã xác định cho hình ảnh
Chúng ta xong rồi. Chúng tôi có một thanh trượt tròn tuyệt vời
Dự phòng nhúng CodePen
Hãy thêm nhiều hình ảnh hơn
Làm việc với bốn hình ảnh là tốt, nhưng sẽ tốt hơn nếu chúng ta có thể chia tỷ lệ cho bất kỳ số lượng hình ảnh nào. Rốt cuộc, đây là mục đích của thanh trượt hình ảnh. Chúng ta sẽ có thể xem xét các hình ảnh
@keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
1Đối với điều này, chúng tôi sẽ làm cho mã chung chung hơn bằng cách giới thiệu Sass. Đầu tiên, chúng tôi xác định một biến số cho số lượng hình ảnh [_______19_______2] và chúng tôi sẽ cập nhật mọi phần mà chúng tôi đã mã hóa cứng số lượng hình ảnh [
.gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
4]Hãy bắt đầu với sự chậm trễ
.gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
Công thức cho độ trễ là
@keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
4, cho chúng ta vòng lặp Sass sau@for $i from 2 to [$n + 1] {
.gallery > img:nth-child[#{$i}] {
animation-delay: calc[#{[1 - $i] / $n} * 8s];
}
}
Chúng tôi cũng có thể biến thời lượng thành một biến nếu chúng tôi thực sự muốn. Nhưng hãy chuyển sang hình ảnh động
@keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% {transform: rotate[-360deg]; }
}
Hãy đơn giản hóa nó để có cái nhìn rõ hơn về mẫu
@keyframes m {
0% { transform: rotate[0]; }
25% { transform: rotate[-90deg]; }
50% { transform: rotate[-180deg]; }
75% { transform: rotate[-270deg]; }
100% { transform: rotate[-360deg]; }
}
Bước giữa mỗi trạng thái bằng
@keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
5 — là @keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
6 — và chúng ta thêm một góc @keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
7 — là @keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
8. Điều đó có nghĩa là chúng ta có thể viết vòng lặp của mình như thế này.gallery {
--s: 280px; /* control the size */
display: grid;
width: var[--s];
aspect-ratio: 1;
padding: calc[var[--s] / 20]; /* we will see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
0Vì mỗi hình ảnh chiếm __16_______5 hoạt ảnh nên chúng tôi thay đổi điều này
.gallery {
--s: 280px; /* control the size */
display: grid;
width: var[--s];
aspect-ratio: 1;
padding: calc[var[--s] / 20]; /* we will see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
1…Với cái này
.gallery {
--s: 280px; /* control the size */
display: grid;
width: var[--s];
aspect-ratio: 1;
padding: calc[var[--s] / 20]; /* we will see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
2Cần lưu ý rằng
.gallery > img:nth-child[2] { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child[3] { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child[4] { animation-delay: -6s; } /* -3 * 8s / 4 */
5 là một giá trị tùy ý mà tôi chọn cho ví dụ này. Chúng tôi cũng có thể biến nó thành một biến để kiểm soát thời gian mỗi hình ảnh sẽ hiển thị. Tôi sẽ bỏ qua điều đó vì mục đích đơn giản, nhưng đối với bài tập về nhà, bạn có thể thử làm và chia sẻ cách thực hiện của mình trong phần nhận xét.gallery {
--s: 280px; /* control the size */
display: grid;
width: var[--s];
aspect-ratio: 1;
padding: calc[var[--s] / 20]; /* we will see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
3Bit cuối cùng là để cập nhật
.gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
4. Chúng ta sẽ cần một số thủ thuật hình học. Bất kể số lượng hình ảnh, cấu hình luôn giống nhau. Chúng tôi có hình ảnh của chúng tôi [vòng tròn nhỏ] được đặt bên trong một vòng tròn lớn và chúng tôi cần tìm giá trị của bán kính, .gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
0Bạn có thể không muốn một lời giải thích hình học nhàm chán, vì vậy đây là cách chúng tôi tìm thấy
.gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
0.gallery {
--s: 280px; /* control the size */
display: grid;
width: var[--s];
aspect-ratio: 1;
padding: calc[var[--s] / 20]; /* we will see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
4Nếu chúng ta biểu thị điều đó dưới dạng phần trăm, điều đó mang lại cho chúng ta
.gallery {
--s: 280px; /* control the size */
display: grid;
width: var[--s];
aspect-ratio: 1;
padding: calc[var[--s] / 20]; /* we will see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
5…có nghĩa là giá trị
.gallery > img {
/* same as before */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate[-360deg]; }
}
4 bằng.gallery {
--s: 280px; /* control the size */
display: grid;
width: var[--s];
aspect-ratio: 1;
padding: calc[var[--s] / 20]; /* we will see the utility of this later */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
6Đã được thực hiện. Chúng tôi có một thanh trượt hoạt động với bất kỳ hình ảnh số nào
Dự phòng nhúng CodePen
Hãy ném chín hình ảnh vào đó
Dự phòng nhúng CodePen
Thêm bao nhiêu hình ảnh tùy thích và cập nhật biến
@keyframes m {
0%, 3% { transform: rotate[0]; }
22%, 27% { transform: rotate[-90deg]; }
47%, 52% { transform: rotate[-180deg]; }
72%, 77% { transform: rotate[-270deg]; }
98%, 100% { transform: rotate[-360deg]; }
}
2 với tổng số hình ảnhkết thúc
Với một vài thủ thuật sử dụng các phép biến đổi CSS và hình học tiêu chuẩn, chúng tôi đã tạo ra một thanh trượt hình tròn đẹp mắt mà không yêu cầu nhiều mã. Điều thú vị về thanh trượt này là chúng ta không cần phải sao chép hình ảnh để giữ hoạt ảnh vô hạn vì chúng ta có một vòng tròn. Sau khi quay hết một lượt, chúng ta sẽ quay lại hình ảnh đầu tiên