Kinh Nghiệm Hướng dẫn Hướng dẫn background-image change animation css - hình nền thay đổi hình ảnh động css 2022
Cao Ngọc đang tìm kiếm từ khóa Hướng dẫn background-image change animation css - hình nền thay đổi hình ảnh động css được Cập Nhật vào lúc : 2022-11-24 10:10:07 . Với phương châm chia sẻ Thủ Thuật Hướng dẫn trong nội dung bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi tham khảo Post vẫn ko hiểu thì hoàn toàn có thể lại Comment ở cuối bài để Ad lý giải và hướng dẫn lại nha.Hoạt hình CSS
CSS được cho phép phim hoạt hình của những phần tử HTML mà không cần sử dụng JavaScript hoặc Flash!
Nội dung chính Show- Hoạt hình CSSHỗ trợ trình duyệt cho hoạt hìnhHoạt hình CSS là gì?Quy tắc @KeyFramesLưu ý: Thuộc tính animation-duration xác định thời gian phim hoạt hình sẽ mất bao lâu để hoàn thành xong. Nếu thuộc tính animation-duration không được chỉ định, sẽ không còn hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;Đặt số lần phim hoạt hình nên chạyVí dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:Ví dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:Ví dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:Ví dụ sau được cho phép phần tử nhận được những giá trị kiểu được đặt bởi khung hình đầu tiên trước khi phim hoạt hình khởi đầu và giữ lại những giá trị kiểu từ khung khóa ở đầu cuối khi hình ảnh động kết thúc:Ví dụ sau được cho phép phần tử nhận được những giá trị kiểu được đặt bởi khung hình đầu tiên trước khi phim hoạt hình khởi đầu và giữ lại những giá trị kiểu từ khung khóa ở đầu cuối khi hình ảnh động kết thúc:
CSS
Trong chương này, bạn sẽ tìm hiểu về những thuộc tính sau:
- @keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Hỗ trợ trình duyệt cho phim hoạt hình
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên tương hỗ đầy đủ thuộc tính.
Tài sản@KeyFrames43.0 10.0 16.0 9.0 30.0 tên hoạt hình43.0 10.0 16.0 9.0 30.0 Thời lượng hoạt ảnh43.0 10.0 16.0 9.0 30.0 Hoạt hình-Delay43.0 10.0 16.0 9.0 30.0 Hoạt hình-itation-Count43.0 10.0 16.0 9.0 30.0 Phía định hướng hoạt hình43.0 10.0 16.0 9.0 30.0 phim hoạt hình thời gian chức năng43.0 10.0 16.0 9.0 30.0 chính sách hoạt hình43.0 10.0 16.0 9.0 30.0 hoạt hình43.0 10.0 16.0 9.0 30.0
Hoạt hình CSS là gì?
Một hình ảnh động được cho phép một yếu tố từ từ thay đổi từ phong cách này sang kiểu khác.
Bạn hoàn toàn có thể thay đổi khi nhiều thuộc tính CSS bạn muốn, nhiều lần tùy thích.
Để sử dụng phim hoạt hình CSS, trước tiên bạn phải chỉ định một số trong những khung chính cho hình ảnh động.
KeyFrames giữ những kiểu mà phần tử sẽ có vào những thời điểm nhất định.
Quy tắc @KeyFrames
Khi bạn chỉ định những kiểu CSS bên trong quy tắc @keyframes, hình ảnh động sẽ dần thay đổi từ phong cách hiện tại sang kiểu mới tại một số trong những thời điểm nhất định.
Để đã có được một hình ảnh động để hoạt động và sinh hoạt giải trí, bạn phải link phim hoạt hình với một yếu tố.
Ví dụ sau đây link phim hoạt hình "ví dụ" với phần tử. Hoạt hình sẽ kéo dãn trong 4 giây và nó sẽ từ từ thay đổi màu nền của phần tử từ "đỏ" thành "vàng":
Thí dụ
/ * Mã phim hoạt hình */ @KeyFrames Ví dụ & nbsp; & nbsp; từ nền màu: red color; & nbsp; đến màu nền: màu vàng;
@keyframes example
from background-color: red;
to background-color: yellow;
/ * Phần tử để áp dụng hình ảnh động cho */ div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: red color; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; & nbsp; phim hoạt hình thời gian: 4S;
div
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
Hãy tự mình thử »
Lưu ý: Thuộc tính animation-duration xác định thời gian phim hoạt hình sẽ mất bao lâu để hoàn thành xong. Nếu thuộc tính animation-duration không được chỉ định, sẽ không còn hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP; The animation-duration property defines how long an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds).
Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng phương pháp sử dụng những từ khóa "từ" và "đến" (đại diện cho 0% (khởi đầu) và 100% (hoàn thành xong)).
Cũng hoàn toàn có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn hoàn toàn có thể thêm nhiều thay đổi kiểu tùy thích.
Ví dụ sau đây sẽ thay đổi màu nền của phần tử khi hình ảnh động hoàn thành xong 25%, hoàn thành xong 50% và một lần nữa khi phim hoạt hình hoàn thành xong 100%:
Thí dụ
/ * Mã phim hoạt hình */ @KeyFrames Ví dụ & nbsp; & nbsp; từ nền màu: red color; & nbsp; đến màu nền: màu vàng;
@keyframes example
0% background-color: red;
25% background-color: yellow;
50% background-color: blue;
100% background-color: green;
/ * Phần tử để áp dụng hình ảnh động cho */ div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: red color; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; & nbsp; phim hoạt hình thời gian: 4S;
div
width: 100px;
height: 100px;
background-color:
red;
animation-name: example;
animation-duration: 4s;
Hãy tự mình thử »
Lưu ý: Thuộc tính animation-duration xác định thời gian phim hoạt hình sẽ mất bao lâu để hoàn thành xong. Nếu thuộc tính animation-duration không được chỉ định, sẽ không còn hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;
Thí dụ
/ * Mã phim hoạt hình */ @KeyFrames Ví dụ & nbsp; & nbsp; từ nền màu: red color; & nbsp; đến màu nền: màu vàng;
@keyframes example
0% background-color:red; left:0px; top:0px;
25% background-color:yellow; left:200px; top:0px;
50% background-color:blue; left:200px; top:200px;
75% background-color:green; left:0px; top:200px;
100% background-color:red; left:0px; top:0px;
/ * Phần tử để áp dụng hình ảnh động cho */ div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: red color; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; & nbsp; phim hoạt hình thời gian: 4S;
div
width: 100px;
height: 100px;
position:
relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
Hãy tự mình thử »
Lưu ý: Thuộc tính animation-duration xác định thời gian phim hoạt hình sẽ mất bao lâu để hoàn thành xong. Nếu thuộc tính animation-duration không được chỉ định, sẽ không còn hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;
Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng phương pháp sử dụng những từ khóa "từ" và "đến" (đại diện cho 0% (khởi đầu) và 100% (hoàn thành xong)).
Cũng hoàn toàn có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn hoàn toàn có thể thêm nhiều thay đổi kiểu tùy thích.
Thí dụ
/ * Mã phim hoạt hình */ @KeyFrames Ví dụ & nbsp; & nbsp; từ nền màu: red color; & nbsp; đến màu nền: màu vàng;
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Hãy tự mình thử »
Lưu ý: Thuộc tính animation-duration xác định thời gian phim hoạt hình sẽ mất bao lâu để hoàn thành xong. Nếu thuộc tính animation-duration không được chỉ định, sẽ không còn hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;
Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng phương pháp sử dụng những từ khóa "từ" và "đến" (đại diện cho 0% (khởi đầu) và 100% (hoàn thành xong)).
Thí dụ
/ * Mã phim hoạt hình */ @KeyFrames Ví dụ & nbsp; & nbsp; từ nền màu: red color; & nbsp; đến màu nền: màu vàng;
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Hãy tự mình thử »
Đặt số lần phim hoạt hình nên chạy
Thuộc tính animation-iteration-count chỉ định số lần một hình ảnh động sẽ chạy.
Ví dụ sau đây sẽ chạy phim hoạt hình 3 lần trước khi nó tạm dừng:
Thí dụ
div & nbsp; & nbsp; width: 100px; & nbsp; & nbsp; độ cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
3;
Hãy tự mình thử »
Ví dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:
Thí dụ
div & nbsp; & nbsp; width: 100px; & nbsp; & nbsp; độ cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
Hãy tự mình thử »
Ví dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; & nbsp; phim hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;
Chạy phim hoạt hình theo hướng ngược hoặc chu kỳ luân hồi thay thế
- Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong những chu kỳ luân hồi thay thế.Thuộc tính hướng phim hoạt hình hoàn toàn có thể có những giá trị sau:animation-name5 - Hoạt hình được phát là thông thường (chuyển tiếp). Đây là mặc địnhanimation-name6 - Hoạt hình được phát theo hướng ngược (ngược)
________ 17- Hoạt hình được phát trước đầu tiên, sau đó ngược lại
Thí dụ
div & nbsp; & nbsp; width: 100px; & nbsp; & nbsp; độ cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
Hãy tự mình thử »
Ví dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:
Thí dụ
div & nbsp; & nbsp; width: 100px; & nbsp; & nbsp; độ cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name:
example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
Hãy tự mình thử »
Ví dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:
Thí dụ
div & nbsp; & nbsp; width: 100px; & nbsp; & nbsp; độ cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
Hãy tự mình thử »
Ví dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; & nbsp; phim hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;
Chạy phim hoạt hình theo hướng ngược hoặc chu kỳ luân hồi thay thế
- Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong những chu kỳ luân hồi thay thế.Thuộc tính hướng phim hoạt hình hoàn toàn có thể có những giá trị sau:animation-name5 - Hoạt hình được phát là thông thường (chuyển tiếp). Đây là mặc địnhanimation-name6 - Hoạt hình được phát theo hướng ngược (ngược)________ 17- Hoạt hình được phát trước đầu tiên, sau đó ngược lạianimation-name8 - Hoạt hình được phát ngược trước, sau đó chuyển tiếp
Ví dụ sau đây sẽ chạy phim hoạt hình theo hướng ngược (ngược):
Thí dụ
div & nbsp; & nbsp; width: 100px; & nbsp; & nbsp; độ cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
#div2 animation-timing-function: ease;
#div3 animation-timing-function: ease-in;
#div4 animation-timing-function: ease-out;
#div5 animation-timing-function: ease-in-out;
Hãy tự mình thử »
Ví dụ sau sử dụng giá trị "vô hạn" để làm cho phim hoạt hình tiếp tục mãi mãi:
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; & nbsp; phim hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;
Chạy phim hoạt hình theo hướng ngược hoặc chu kỳ luân hồi thay thế
Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong những chu kỳ luân hồi thay thế.
- Thuộc tính hướng phim hoạt hình hoàn toàn có thể có những giá trị sau:animation-name5 - Hoạt hình được phát là thông thường (chuyển tiếp). Đây là mặc địnhanimation-name6 - Hoạt hình được phát theo hướng ngược (ngược)________ 17- Hoạt hình được phát trước đầu tiên, sau đó ngược lại
animation-name8 - Hoạt hình được phát ngược trước, sau đó chuyển tiếp
Thí dụ
div & nbsp; & nbsp; width: 100px; & nbsp; & nbsp; độ cao: 100px; & nbsp; & nbsp; vị trí: tương đối; & nbsp; Hoạt hình thời gian: 4S;
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
Hãy tự mình thử »
Ví dụ sau được cho phép phần tử nhận được những giá trị kiểu được đặt bởi khung hình đầu tiên trước khi hình ảnh động khởi đầu (trong quá trình triệt để phim hoạt hình):
Thí dụ
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Bối cảnh: đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; Thời gian phim hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; & nbsp; chính sách phim hoạt hình-fill: lùi;
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
Hãy tự mình thử »
Ví dụ sau được cho phép phần tử nhận được những giá trị kiểu được đặt bởi khung hình đầu tiên trước khi phim hoạt hình khởi đầu và giữ lại những giá trị kiểu từ khung khóa ở đầu cuối khi hình ảnh động kết thúc:
Thí dụ
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Bối cảnh: đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; Thời gian phim hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; & nbsp; chính sách phim hoạt hình-fill: lùi;
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Hãy tự mình thử »
Ví dụ sau được cho phép phần tử nhận được những giá trị kiểu được đặt bởi khung hình đầu tiên trước khi phim hoạt hình khởi đầu và giữ lại những giá trị kiểu từ khung khóa ở đầu cuối khi hình ảnh động kết thúc:
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; & nbsp; nền: red color; & nbsp; Vị trí: tương đối; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; Thời gian phim hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; chính sách phim hoạt hình-fill: cả hai;
Thí dụ
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Bối cảnh: đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; Thời gian phim hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; & nbsp; chính sách phim hoạt hình-fill: lùi;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Hãy tự mình thử »
Ví dụ sau được cho phép phần tử nhận được những giá trị kiểu được đặt bởi khung hình đầu tiên trước khi phim hoạt hình khởi đầu và giữ lại những giá trị kiểu từ khung khóa ở đầu cuối khi hình ảnh động kết thúc:
Thí dụ
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Bối cảnh: đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; Thời gian phim hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; & nbsp; chính sách phim hoạt hình-fill: lùi;
animation: example 5s linear 2s infinite alternate;
}
Hãy tự mình thử »
Ví dụ sau được cho phép phần tử nhận được những giá trị kiểu được đặt bởi khung hình đầu tiên trước khi phim hoạt hình khởi đầu và giữ lại những giá trị kiểu từ khung khóa ở đầu cuối khi hình ảnh động kết thúc:
div & nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; & nbsp; nền: red color; & nbsp; Vị trí: tương đối; & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; Thời gian phim hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; chính sách phim hoạt hình-fill: cả hai;
Hoạt hình tài sản tốc kýVí dụ dưới đây sử dụng sáu thuộc tính phim hoạt hình: div & nbsp; tên phim hoạt hình: Ví dụ; & nbsp; Hoạt hình thời gian: 5s; & nbsp; phim hoạt hình thời gian hiệu suất cao: tuyến tính; & nbsp; Hoạt hình-Phân chế: 2s; & nbsp; Hoạt hình-itation-Count: Infinite; & nbsp; Định hướng phim hoạt hình: Thay thế; Hiệu ứng phim hoạt hình tương tự như trên hoàn toàn có thể đạt được bằng phương pháp sử dụng thuộc tính tốc ký animation: div & nbsp; Hoạt hình: Ví dụ 5S tuyến tính 2S Infinite thay thế; Thuộc tính phim hoạt hình CSSBảng sau liệt kê quy tắc @KeyFrames và tất cả những thuộc tính phim hoạt hình CSS:Tài sảnSự mô tả@KeyFramesChỉ định mã hoạt hìnhhoạt hìnhMột thuộc tính tốc ký để thiết lập tất cả những thuộc tính hoạt hìnhHoạt hình-DelayChỉ định độ trễ để khởi đầu hoạt hìnhPhía định hướng hoạt hìnhChỉ định xem một hình ảnh động nên được phát về phía trước, ngược hay trong những chu kỳ luân hồi thay thếThời lượng hoạt ảnhChỉ định thời gian phim hoạt hình sẽ mất bao lâu để hoàn thành xong một chu kỳchế độ hoạt hìnhChỉ định một kiểu cho phần tử khi phim hoạt hình không phát (trước khi nó khởi đầu, sau khi nó kết thúc hoặc cả hai)Hoạt hình-itation-CountTải thêm tài liệu liên quan đến nội dung bài viết Hướng dẫn background-image change animation css - hình nền thay đổi hình ảnh động css programming css Text animation CSS Hover animation CSS Animation JS
