Hướng dẫn css color change animation infinite - css thay đổi màu hoạt hình vô hạn

Question

Tôi cần thay đổi màu nền của trang của tôi trong một vòng lặp. Vì vậy, tôi có một cái gì đó như thế này:

Nội dung chính Show

Lập kế hoạch hoạt hình của bạn
Tạo hình ảnh động CSS vòng lặp
Lưu ý: Mã này đã giành được công việc trong IE9.
Chúng ta nên sử dụng loại hình hoạt hình nào?
Bạn có thể làm động màu CSS không?
Làm thế nào để bạn thay đổi màu nền trong CSS animate?
Bạn có thể làm động Z Index CSS không?
Làm thế nào để bạn thay đổi màu nền từ từ trong CSS?

.bg-changer {
    animation: bg-img-slider 10s linear infinite;
    transition: background 300ms ease-in 200ms;

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}





  
  BG



  
    
      Page Title
      This is the tag line

}

@keyframes bg-img-slider {
    0%,
    100% {
        background-image: radial-gradient(silver, snow);
    }
    20% {
        background-image: radial-gradient(#2b5876, #4e4376);
        /*animation-timing-function: ease-in;*/
    }
    40% {
        background-image: radial-gradient(#44A08D, #093637);
    }
    60% {
        background-image: radial-gradient(#DD5E89, #F7BB97);
        /*animation-timing-function: ease-in;*/
    }
    80% {
        background-image: radial-gradient(#348F50, #56B4D3);
    }
    90% {
        background-image: radial-gradient(#bdc3c7, #2c3e50);
        /*animation-timing-function: ease-in;*/
    }
}

Tôi áp dụng lớp bg-changer cho thẻ body. Nó hoạt động nhưng sự thay đổi màu sắc xảy ra như một cái tát. Tôi đã thử một số thứ để làm cho nó mượt mà hơn. Tôi đã thử transition, animation-timing-fuction và một vài người khác (cũng đặt chúng vào các khung chính). Dường như không có gì để làm việc!

Hãy giáo dục tôi với những câu hỏi sau đây tôi có:

Đầu tiên, rõ ràng, làm thế nào để tôi thay đổi màu nền cơ thể một cách trơn tru hơn là ngay lập tức (trên mỗi khung chính %).smoothly rather than instantly (on every keyframe %).

Tại sao

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

0 không hoạt động? Tôi đã phải sử dụng

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

1. Cách sử dụng chính xác -

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

2,

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

0,

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

1 là gì?

Cảm ơn trước.

Tìm hiểu làm thế nào để tạo một vòng màu nền hoạt hình đơn giản với CSS tinh khiết bằng cách sử dụng các khung chính và các thuộc tính hoạt hình CSS khác nhau.

Trong ví dụ này, chúng tôi nhắm mục tiêu trực tiếp vào phần tử HTML

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

5 với CSS, nhưng bạn có thể áp dụng ví dụ mã sau cho bất kỳ phần tử, lớp hoặc ID HTML nào.

Hướng dẫn css color change animation infinite - css thay đổi màu hoạt hình vô hạn

Mật mã

Bạn có thể sử dụng bản demo này làm tài liệu tham khảo.

Lưu ý: Mã này đã giành được công việc trong IE9.

Lập kế hoạch hoạt hình của bạn

Ngay cả khi bạn không biết chính xác kết quả của bạn sẽ kết thúc như thế nào, thì nó luôn luôn thực tế khi có ý tưởng về hướng bạn đi. Hãy để thiết lập một vài điều về hoạt hình lặp trước khi chúng tôi bắt đầu mã hóa:

Chúng ta muốn sử dụng bao nhiêu màu nền?
Tổng thời gian hoạt hình có kéo dài bao lâu?
Chúng ta nên sử dụng loại hình hoạt hình nào?

Vì mục đích của hướng dẫn này là giữ cho mọi thứ đơn giản, hãy để sử dụng:

5 màu nền khác nhau
Thời lượng 10 giây (mỗi màu được hiển thị 2 giây)
Một đường cong hoạt hình tuyến tính (hình ảnh động có cùng tốc độ từ đầu đến cuối)

Tôi đã sử dụng Coolers.co để nhanh chóng tạo bảng màu hài hòa cho ví dụ này:

Liên kết trực tiếp đến bảng màu làm mát

Đây là những màu HEX hoạt hình nền sắp tới của chúng tôi sẽ lặp lại:

Sunset Orange:

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

6

Aquamarine trung bình:

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

7

màu xanh nhạt:

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

8

Mellow Yellow:

body {
  margin: 15px auto;
  height: 95vh;
  width: 90%;
  border: 1px solid silver;
}
.bg-changer {
  animation: bg-img-slider 10s linear infinite;
  /*transition: background 300ms ease-in 200ms;*/
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}
@keyframes bg-img-slider {
  0%, 100% {
    background-image: radial-gradient(silver, snow);
  }
  20% {
    background-image: radial-gradient(#2b5876, #4e4376);
  }
  40% {
    background-image: radial-gradient(#44A08D, #093637);
  }
  60% {
    background-image: radial-gradient(#DD5E89, #F7BB97);
  }
  80% {
    background-image: radial-gradient(#348F50, #56B4D3);
  }
  90% {
    background-image: radial-gradient(#bdc3c7, #2c3e50);
  }
}
.page-header {
  padding: 10px 0 5px 15px;
}
.page-header>h2 {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
.page-header>p {
  font-size: 85%;
}

9

Tangerine sống động:





  
  BG



  
    
      Page Title
      This is the tag line

0

Bạn không cần phải ghi nhớ tất cả những cái tên đó (chúng được lấy trực tiếp từ máy làm mát), tôi chỉ cần thêm chúng để có biện pháp tốt.

Được rồi, vì vậy bây giờ chúng tôi có 5 màu của chúng tôi, rằng chúng tôi sẽ ném vào một hoạt hình vòng hiển thị mỗi màu 2 giây.

Tiếp theo, chúng tôi sẽ tạo ra hình ảnh động dựa trên kế hoạch của chúng tôi.

Tạo hình ảnh động CSS vòng lặp

Trong CSS, các khung hoạt hình hoạt động theo tỷ lệ phần trăm từ





  
  BG



  
    
      Page Title
      This is the tag line

1 đến





  
  BG



  
    
      Page Title
      This is the tag line

2. Thêm các khung khóa CSS sau vào bảng kiểu của bạn:keyframes to your stylesheet:

/* Standard syntax */
@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

Bây giờ chúng tôi có một thuộc tính KeyFrames gọi là





  
  BG



  
    
      Page Title
      This is the tag line

3 với 5 khoảng màu, được chia đều từ





  
  BG



  
    
      Page Title
      This is the tag line

1 đến





  
  BG



  
    
      Page Title
      This is the tag line

2 của hoạt hình.

Bây giờ, thời gian để tạo ra các yếu tố cơ thể của quy tắc CSS, vì vậy chúng ta có thể lấy bảng màu KeyFrames của mình và đưa nó vào sử dụng.

Thêm các thuộc tính hoạt hình CSS sau đây trong bộ quy tắc chọn cơ thể của bạn và xem những gì xảy ra trong cửa sổ trình duyệt của bạn:

body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Nếu bạn đã làm mọi thứ đúng, giờ đây bạn nên có hoạt hình màu nền liên tục chuyển đổi từ màu sang màu sang màu với 2 giây.

Mật mã

Bạn có thể sử dụng bản demo này làm tài liệu tham khảo.

Lưu ý: Mã này đã giành được công việc trong IE9.

Lập kế hoạch hoạt hình của bạn
Ngay cả khi bạn không biết chính xác kết quả của bạn sẽ kết thúc như thế nào, thì nó luôn luôn thực tế khi có ý tưởng về hướng bạn đi. Hãy để thiết lập một vài điều về hoạt hình lặp trước khi chúng tôi bắt đầu mã hóa:
Chúng ta muốn sử dụng bao nhiêu màu nền?
Tổng thời gian hoạt hình có kéo dài bao lâu?

Chúng ta nên sử dụng loại hình hoạt hình nào?

Vì mục đích của hướng dẫn này là giữ cho mọi thứ đơn giản, hãy để sử dụng:linear. This means that we don’t have to declare the property in our CSS rule-sets when we want to use it. That’s why the animation speed curve in our example earlier runs linearly.

5 màu nền khác nhau

Bạn có thể làm động màu CSS không?

Hoạt hình màu CSS 3 có thể được sử dụng trong các trình duyệt hiện đại ngày nay.Đối với hầu hết các trường hợp sử dụng, không có hình ảnh động nào trong các trình duyệt không được hỗ trợ không phải là vấn đề, và, nếu có, UI jQuery có thể được sử dụng để ghi nhận chức năng.. For most use cases no animations in unsupported browsers isn't a problem, and, if it is, jQuery UI can be used to polyfill the functionality.

Làm thế nào để bạn thay đổi màu nền trong CSS animate?

Cách thức hoạt động của CSS.Đầu tiên, chúng tôi thêm thuộc tính tên hoạt hình và cung cấp cho nó một giá trị của boondcolorpalette-bây giờ các khung hình màu nền mà chúng tôi đã tạo trước đó được gán cho phần tử cơ thể.Chúng tôi sử dụng thời lượng hoạt hình: thuộc tính và cung cấp cho nó giá trị 10s-bây giờ tổng thời lượng của hoạt hình của chúng tôi là 10 giây.add the animation-name property and give it a value of the backgroundColorPalette — now the background color keyframes we created earlier are assigned to the body element. We use the animation-duration: property and give it a value of 10s — now our animation's total duration is 10 seconds.

Bạn có thể làm động Z Index CSS không?

Vâng, bạn có thể làm động Z-index!Nó không rõ ràng về mặt trực quan trong bản demo này, nhưng thấy các giá trị được nội suy đi từ 1 đến 5 xác nhận điều đó. ! It's not visually apparent in this demo, but seeing the interpolated values go from 1 to 5 confirms it.

Làm thế nào để bạn thay đổi màu nền từ từ trong CSS?

CSS CSS chậm thay đổi màu sắc Câu trả lời..

Chuyển tiếp: Tất cả 0,5s dễ dàng ;.

Bối cảnh: Đỏ ;.

Đệm: 10px ;.

Div: Di chuột {.

Bối cảnh: Màu xanh lá cây ;.

Đệm: 20px ;.

programming css Color animation CSS CSS cycle colors

Hướng dẫn css color change animation infinite - css thay đổi màu hoạt hình vô hạn

Page Title

Mật mã

Lập kế hoạch hoạt hình của bạn

Page Title

Tạo hình ảnh động CSS vòng lặp

Page Title

Page Title

Page Title

Page Title

Page Title

Mật mã

Lưu ý: Mã này đã giành được công việc trong IE9.

Chúng ta nên sử dụng loại hình hoạt hình nào?

Bạn có thể làm động màu CSS không?

Làm thế nào để bạn thay đổi màu nền trong CSS animate?

Bạn có thể làm động Z Index CSS không?

Làm thế nào để bạn thay đổi màu nền từ từ trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

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