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:
.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
0 không hoạt động? Tôi đã phải sử dụngbody { 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ì?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%; }
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
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.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%;
}
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:
6body { 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%; }
- Aquamarine trung bình:
7body { 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%; }
- màu xanh nhạt:
8body { 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%; }
- Mellow Yellow:
9body { 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%; }
- Tangerine sống động:
0BG
Page Title
This is the tag line
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