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

Android 6.0 với 7.0 khác nhau thế nào năm 2024
Android 6.0 với 7.0 khác nhau thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào Công Nghệ Android
Giải bài tập hóa 10 bài 33 trang 143 năm 2024
Giải bài tập hóa 10 bài 33 trang 143 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Html overflow start at the bottom instead of top năm 2024
Html overflow start at the bottom instead of top năm 2024

mẹo hay Top List Top
Cơ giới hóa khâu gieo trồng là gì năm 2024
Cơ giới hóa khâu gieo trồng là gì năm 2024

mẹo hay Hỏi Đáp Là gì
Máy điều hòa nào tốt nhất hiện nay năm 2024
Máy điều hòa nào tốt nhất hiện nay năm 2024

mẹo hay Top List Tốt nhất Công Nghệ Máy Review
Unesco công nhận di sản văn hóa phi vật thể năm 2024
Unesco công nhận di sản văn hóa phi vật thể năm 2024

mẹo hay
Lỗi usb k nhận win 10 máy hp năm 2024
Lỗi usb k nhận win 10 máy hp năm 2024

mẹo hay Công Nghệ Máy
Khác biệt giữa hóa đơn cá nhân và công ty năm 2024
Khác biệt giữa hóa đơn cá nhân và công ty năm 2024

mẹo hay So Sánh Khác biệt
Hóa giải xung khắc chồng 1994 vợ 1997 năm 2024
Hóa giải xung khắc chồng 1994 vợ 1997 năm 2024

mẹo hay
Thiên thần tội lỗi ngôi sao thời trang năm 2024
Thiên thần tội lỗi ngôi sao thời trang năm 2024

mẹo hay
Giấy đề nghị thanh toán có cần bản gốc không năm 2024
Giấy đề nghị thanh toán có cần bản gốc không năm 2024

mẹo hay
Màu đỏ san hô hợp với da nào năm 2024
Màu đỏ san hô hợp với da nào năm 2024

mẹo hay
Bài tập năng cao điền đúng dạng từ năm 2024
Bài tập năng cao điền đúng dạng từ năm 2024

mẹo hay Khỏe Đẹp Bài tập
Loa di động jbl pulse 2 bị lỗi bluetooth năm 2024
Loa di động jbl pulse 2 bị lỗi bluetooth năm 2024

mẹo hay
Cấu tạo của bài văn kể chuyện lớp 4 năm 2024
Cấu tạo của bài văn kể chuyện lớp 4 năm 2024

mẹo hay
Máy phô tô fujixerox s2220 báo lỗi 092910 năm 2024
Máy phô tô fujixerox s2220 báo lỗi 092910 năm 2024

mẹo hay Công Nghệ Máy
Bi thủy tinh và bi thép cái nào nặng hơn năm 2024
Bi thủy tinh và bi thép cái nào nặng hơn năm 2024

mẹo hay
Bài tập phần liệt kê và dấu câu năm 2024
Bài tập phần liệt kê và dấu câu năm 2024

mẹo hay Khỏe Đẹp Bài tập
Cho thuê văn phòng ibm hội nghị theo ngày năm 2024
Cho thuê văn phòng ibm hội nghị theo ngày năm 2024

mẹo hay
Giải toán lớp 8 tập 2 bài 7 năm 2024
Giải toán lớp 8 tập 2 bài 7 năm 2024

mẹo hay

Quảng Cáo

Có thể bạn quan tâm

Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
9 tháng trước . bởi ComelyBingo
Họ tiếng nhật của bạn là gì năm 2024
9 tháng trước . bởi UnconvincedManifesto
Ý nghĩa của header from top là gì năm 2024
9 tháng trước . bởi WoolenAversion
Tự học tiếng anh như thế nào hiệu quả năm 2024
9 tháng trước . bởi ColdPharaoh
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
9 tháng trước . bởi ArtificialRadiance
Tuổi đinh mão xây nhà năm nào tốt năm 2024
9 tháng trước . bởi ProdigiousHomeland
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
9 tháng trước . bởi TallFluke
Các yếu tố cấu thành văn hóa tổ chức năm 2024
9 tháng trước . bởi UprootedInterpretation
Thế nào là số vô tỉ cho ví dụ năm 2024
9 tháng trước . bởi GhastlyDeliverance
Quà trung thu tiếng anh là gì năm 2024
9 tháng trước . bởi ExtinctTractor

Toplist được quan tâm

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

Quảng cáo

Xem Nhiều

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.