search

CSS hoạt hình vòng tròn

Ngày đăng: 05/02/2023
Trả lời: 0
Lượt xem: 187

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

Show

HTML




<html lang="en">

 

<0>

2<4>

6_______56_______7

6_______56_______9

2<14>

<4

2<<7>

6_______58_______0

html1____58_______2

html1____58_______4

6_______58_______6

 

6_______58_______9

html1____58_______4

html1____59_______3

6_______58_______6

 

6_______59_______8

html1____60_______0

html1=2

html1____60_______4

html1=6

html1____60_______8

html1____61_______0

6_______58_______6

 

6_______61_______5

html1____61_______7

"en"8"en"9

>0>1

html1____58_______6

 

html1>6

"en"8>8

>0 0

html1____58_______6

6_______58_______6

2<1<7>

<10>

 

<<4____62_______

2<<8<9<8>

 

2____57_______05>

6_______56_______7

6_______56_______9

2<105>

 

2<___18 19_______60__________212218>

<1<4>

 

<1____58_______>

đầu ra

CSS hoạt hình vòng tròn

 

ví dụ 2. Trong ví dụ này, chúng ta sẽ di chuyển phần tử hình ảnh theo đường tròn theo hướng ngược kim đồng hồ

Thanh trượt hình ảnh (còn gọi là băng chuyền) ở khắp mọi nơi. Có rất nhiều thủ thuật CSS để tạo thanh trượt thông dụng cho hình ảnh trượt từ trái sang phải (hoặc ngược lại). Điều tương tự cũng xảy ra với nhiều thư viện JavaScript ngoài kia tạo ra các thanh trượt lạ mắt với các hoạt ảnh phức tạp. Chúng tôi sẽ không làm bất cứ điều gì trong bài viết này

Thông qua một loạt bài viết nhỏ, chúng ta sẽ khám phá một số thanh trượt chỉ CSS lạ mắt và không phổ biến. Nếu bạn cảm thấy mệt mỏi khi nhìn thấy những thanh trượt cổ điển giống nhau, thì bạn đang ở đúng nơi

Chuỗi thanh trượt CSS

  • Thanh trượt hình ảnh xoay tròn (bạn đang ở đây. )
  • Lật qua hình ảnh Polaroid
  • Thanh trượt 3D vô hạn

Đối với bài viết đầu tiên này, chúng ta sẽ bắt đầu với thứ mà tôi gọi là “thanh trượt hình ảnh xoay tròn”

Dự phòng nhúng CodePen

Mát mẻ phải không?

Đánh dấu HTML

Nếu bạn đã theo dõi loạt trang trí hình ảnh ưa thích của tôi hoặc lưới CSS và hình dạng tùy chỉnh, thì bạn sẽ biết rằng quy tắc đầu tiên của tôi là làm việc với HTML nhỏ nhất có thể. Tôi luôn cố gắng hết sức để tìm các giải pháp CSS trước khi làm mã của mình lộn xộn với rất nhiều 

.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;
}
7 và những thứ khác

Quy tắc tương tự cũng được áp dụng ở đây - mã của chúng tôi không có gì khác ngoài danh sách hình ảnh trong vùng chứa

Giả sử chúng ta đang làm việc với bốn hình ảnh

Đó là nó. Bây giờ hãy chuyển sang phần thú vị của mã. Nhưng trước tiên, chúng ta sẽ đi sâu vào vấn đề này để hiểu logic về cách thanh trượt của chúng ta hoạt động

Làm thế nào nó hoạt động?

Đây là video tôi xóa 

.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;
}
8 khỏi CSS để chúng ta có thể hiểu rõ hơn cách hình ảnh chuyển động

Nó giống như bốn hình ảnh của chúng tôi được đặt trên một vòng tròn lớn quay ngược chiều kim đồng hồ

CSS hoạt hình vòng tròn

Tất cả các hình ảnh có cùng kích thước (ký hiệu là 

.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;
}
9 trong hình). Lưu ý hình tròn màu xanh là hình tròn giao với tâm của tất cả các hình và có 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); }
}
0). Chúng tôi sẽ cần giá trị này sau cho hoạt hình của chúng tôi. 
.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 {
  /* 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); }
}
4

Vì 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 */
1

CSS hoạt hình vòng tròn

Hã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út

Dự 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;
}
0

Vì 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;
}
2

Cầ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;
}
3

Bit 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); }
}
0

CSS hoạt hình vòng tròn

Bạ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;
}
4

Nế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 ảnh

kế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

Làm cách nào để tạo một vòng tròn trong CSS?

Để tạo hình tròn, chúng ta có thể đặt bán kính đường viền cho phần tử . Điều này sẽ tạo ra các góc cong trên phần tử. Nếu chúng tôi đặt nó thành 50%, nó sẽ tạo ra một vòng tròn. Nếu bạn đặt chiều rộng và chiều cao khác, thay vào đó, chúng tôi sẽ nhận được hình bầu dục.

Làm cách nào để khoanh tròn văn bản trong CSS?

Thêm CSS .
Đặt bán kính đường viền thành "50%"
Chỉ định chiều rộng và chiều cao của phần tử
Tạo kiểu cho lớp bằng các thuộc tính nền, đường viền và màu sắc
Căn giữa số bằng cách sử dụng giá trị "căn giữa" của thuộc tính căn chỉnh văn bản
Chỉ định phông chữ của số

CSS có tốt cho hoạt hình không?

Hoạt ảnh CSS làm cho trang web hấp dẫn về mặt trực quan và nâng cao trải nghiệm người dùng . Chúng tôi hy vọng bạn có thể lấy cảm hứng từ 30 ví dụ hoạt hình CSS thú vị hàng đầu này để tạo một trang web hoạt hình tuyệt vời.

Hoạt ảnh CSS có tốt hơn hoạt ảnh JavaScript không?

Thực tế là, trong hầu hết các trường hợp, hiệu suất của hoạt ảnh dựa trên CSS gần giống như hoạt ảnh được tạo bằng JavaScript — trong Firefox tại . Một số thư viện hoạt hình dựa trên JavaScript, như GSAP và Velocity. JS, thậm chí còn tuyên bố rằng chúng có thể đạt được hiệu suất tốt hơn so với chuyển đổi/hoạt ảnh CSS gốc.

programming css

Bài Viết Liên Quan

Tìm hiểu chung về văn bản nghị luận năm 2024
Tìm hiểu chung về văn bản nghị luận năm 2024

mẹo hay
Sử lý lỗi không lăng được chuột trong sketchup năm 2024
Sử lý lỗi không lăng được chuột trong sketchup năm 2024

mẹo hay Công Nghệ Chuột
Bài tập tìm hằng số cân bằng hoá 11 năm 2024
Bài tập tìm hằng số cân bằng hoá 11 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Băn khoăn có nghĩa là gì năm 2024
Băn khoăn có nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì
Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024
Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024

mẹo hay
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Bánh
Họ tiếng nhật của bạn là gì năm 2024
Họ tiếng nhật của bạn là gì năm 2024

là ai Hỏi Đáp Là gì
Ý nghĩa của header from top là gì năm 2024
Ý nghĩa của header from top là gì năm 2024

mẹo hay Hỏi Đáp Là gì Top List Top Header la gì Footer la gì
Tự học tiếng anh như thế nào hiệu quả năm 2024
Tự học tiếng anh như thế nào hiệu quả năm 2024

mẹo hay Hỏi Đáp Thế nào Học Tốt Học Tiếng anh Học tiếng Anh
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Khỏe Đẹp Cơ thể
Tuổi đinh mão xây nhà năm nào tốt năm 2024
Tuổi đinh mão xây nhà năm nào tốt năm 2024

mẹo hay Xây Đựng Xây Nhà
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
Khoán chi đến sản phẩm cuối cùng là gì năm 2024

là ai Hỏi Đáp Là gì
Các yếu tố cấu thành văn hóa tổ chức năm 2024
Các yếu tố cấu thành văn hóa tổ chức năm 2024

mẹo hay
Thế nào là số vô tỉ cho ví dụ năm 2024
Thế nào là số vô tỉ cho ví dụ năm 2024

mẹo hay Hỏi Đáp Thế nào Ví dụ
Quà trung thu tiếng anh là gì năm 2024
Quà trung thu tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Mid-Autumn gift
Đẻ mổ tối đa được bao nhiêu lần năm 2024
Đẻ mổ tối đa được bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu
Thiết kế quán trà sữa bao nhiêu tiền năm 2024
Thiết kế quán trà sữa bao nhiêu tiền năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Trà sữa
Top nước hoa hồng se khít lỗ chân lông năm 2024
Top nước hoa hồng se khít lỗ chân lông năm 2024

mẹo hay Top List Top
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024
Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024

mẹo hay
Daylight is coming like a rentless milkman upstairs là gì năm 2024
Daylight is coming like a rentless milkman upstairs là gì năm 2024

là ai Hỏi Đáp Là gì

Quảng Cáo

Có thể bạn quan tâm

Bóng đèn cực tím 1m2 công suất bao nhiêu watt năm 2024
1 tháng trước . bởi TrackingTrilogy
Cơ sở của giá trị hàng hóa là gì năm 2024
1 tháng trước . bởi Fast-foodLineage
Cách sửa lỗi trong speakers properties ko hiện enhancement năm 2024
1 tháng trước . bởi MilitaryTracing
Giải bài tập toán lớp 5 tập 2 bài 163 năm 2024
1 tháng trước . bởi ThoughtlessEnclosure
Miracle in cell number 7 review năm 2024
1 tháng trước . bởi UndeniableFiring
Mục tiêu bài học chi tiết đánh giá được năm 2024
1 tháng trước . bởi ThunderousFlask
Asias next top model 5 tap 6 năm 2024
1 tháng trước . bởi HorribleBattling
Cầu gỗ lim huế bao nhiêu tiền năm 2024
1 tháng trước . bởi YieldingSwimmer
Cân bằng sinh học là gì cho ví dụ năm 2024
1 tháng trước . bởi UmbilicalProceeding
Tổng hợp kiến thức toán ôn thi đại học năm 2024
1 tháng trước . bởi ImpossibleEquation

Toplist được quan tâm

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024
5 ngày trước
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
1 tuần trước
Tự học tiếng anh như thế nào hiệu quả năm 2024
1 tuần trước
Bài tập tìm hằng số cân bằng hoá 11 năm 2024
3 ngày trước
Họ tiếng nhật của bạn là gì năm 2024
1 tuần trước
Băn khoăn có nghĩa là gì năm 2024
4 ngày trước
Tìm hiểu chung về văn bản nghị luận năm 2024
2 ngày trước
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024
1 ngày trước
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
1 tuần trước
Ý nghĩa của header from top là gì năm 2024
1 tuần trước

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Học Tốt Inc.