Hoạt ảnh CSS – lên và xuống hoạt ảnh css

Bạn đang xem : hoạt ảnh lên và xuống css

CSS

Hoạt ảnh

Hoạt ảnh CSS

CSS cho phép tạo hoạt ảnh cho các phần tử HTML mà không cần sử dụng JavaScript hoặc Flash!

CSS

Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:

  • @ keyframes
  • animation-name
  • animation-time
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • hoạt ảnh

Hỗ trợ trình duyệt cho hoạt ảnh

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Tài sản

@keyframes
43.0
10.0
16.0
9.0
30.0

tên hoạt hình
43.0
10.0
16.0
9.0
30.0

Thời lượng hoạt ảnh
43.0
10.0
16.0
9.0
30.0

hoạt ảnh-độ trễ
43.0
10.0
16.0
9.0
30.0

hoạt-động-lặp-đếm
43.0
10.0
16.0
9.0
30.0

hướng hoạt hình
43.0
10.0
16.0
9.0
30.0

hoạt hình-thời gian-chức năng
43.0
10.0
16.0
9.0
30.0

hoạt hình-điền-chế độ
43.0
10.0
16.0
9.0
30.0

hoạt hình
43.0
10.0
16.0
9.0
30.0

Hoạt ảnh CSS là gì?

Hoạt ảnh cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác.

Bạn có thể thay đổi bao nhiêu thuộc tính CSS mà bạn muốn, bao nhiêu lần tùy ý.

Để sử dụng hoạt ảnh CSS, trước tiên bạn phải chỉ định một số khung hình chính cho
hoạt hình.

Các khung hình chính giữ kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định.

Quy tắc @keyframes

Khi bạn chỉ định kiểu CSS bên trong @ keyframes
quy tắc, hoạt ảnh sẽ dần thay đổi từ kiểu hiện tại sang kiểu mới
vào những thời điểm nhất định.

Để hoạt ảnh hoạt động, bạn phải liên kết hoạt ảnh với một phần tử.

Ví dụ sau liên kết hoạt ảnh “example” với & lt; div & gt; yếu tố.
Hoạt ảnh sẽ kéo dài trong 4 giây và nó sẽ dần dần thay đổi
background-color của & lt; div & gt; phần tử từ “đỏ” sang “vàng”:

Ví dụ

/ * Mã hoạt ảnh * /
Ví dụ về @keyframes {
từ {background-color: red;}

thành {background-color: yellow;}
}

/ * Phần tử để áp dụng hoạt ảnh cho * /
div {
chiều rộng: 100px;
chiều cao: 100px;
background-color: red;
animation-name: example;
thời lượng hoạt ảnh: 4 giây;
}

Hãy tự mình thử »

Lưu ý: Thuộc tính animation-time
xác định thời gian hoàn thành một hoạt ảnh. Nếu thuộc tính animation-time không được chỉ định,
sẽ không có hoạt ảnh nào xảy ra, bởi vì
giá trị mặc định là 0s (0 giây).

Trong ví dụ trên, chúng tôi đã chỉ định khi nào kiểu sẽ thay đổi bằng cách sử dụng
các từ khóa “từ” và “đến” (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

Cũng có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm bao nhiêu
thay đổi phong cách theo ý muốn.

Ví dụ sau sẽ thay đổi màu nền của & lt; div & gt;
phần tử khi hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt ảnh hoàn thành 100%:

Ví dụ

/ * Ví dụ về mã hoạt ảnh * /
@keyframes
{
0% {background-color: red;}

25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/ * Phần tử để áp dụng hoạt ảnh cho * /
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
hoạt ảnh-thời lượng: 4 giây;
}
Hãy tự mình thử »

Ví dụ sau sẽ thay đổi cả màu nền và vị trí của & lt; div & gt;
phần tử khi hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt ảnh hoàn thành 100%:

Ví dụ

/ * Mã hoạt ảnh * /Ví dụ về
@keyframes
{
0% {background-color: red; trái: 0px; đầu trang: 0px;}

25% {background-color: vàng; trái: 200px; đầu trang: 0px;}

50% {background-color: blue; trái: 200px; đầu trang: 200px;}

75% {background-color: xanh lá cây; trái: 0px; đầu trang: 200px;}

100% {background-color: red; trái: 0px; đầu trang: 0px;}
}

/ * Phần tử để áp dụng hoạt ảnh cho * /
div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
hoạt ảnh-thời lượng: 4 giây;
}

Hãy tự mình thử »

Trì hoãn hoạt ảnh

Thuộc tính animation-delay chỉ định độ trễ khi bắt đầu hoạt ảnh.

Ví dụ sau có độ trễ 2 giây trước khi bắt đầu hoạt ảnh:

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;

thời lượng hoạt ảnh: 4 giây;
độ trễ hoạt ảnh: 2 giây;
}

Hãy tự mình thử »

Giá trị âm cũng được phép. Nếu sử dụng các giá trị âm, hoạt ảnh
sẽ bắt đầu như thể nó đã phát được N giây.

Xem Thêm  Văn bản gạch chân HTML - Cách sử dụng thẻ với mã mẫu - gạch dưới văn bản trong html

Trong ví dụ sau, hoạt ảnh sẽ bắt đầu như thể nó đã từng là
phát trong 2 giây:

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
thời lượng hoạt ảnh: 4 giây;
hoạt ảnh-độ trễ: -2 giây;
}

Hãy tự mình thử »

Đặt số lần hoạt ảnh sẽ chạy

Thuộc tính animation-iteration-count chỉ định số lần một hoạt ảnh sẽ chạy.

Ví dụ sau sẽ chạy hoạt ảnh 3 lần trước khi dừng:

Ví dụ

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
thời lượng hoạt ảnh: 4 giây;
hoạt ảnh-lặp-đếm: 3;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị “vô hạn” để tạo hoạt ảnh
tiếp tục mãi mãi:

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
hoạt ảnh-thời lượng: 4 giây;
hoạt-động-lặp-đếm:
vô hạn;
}

Hãy tự mình thử »

Chạy hoạt ảnh theo hướng ngược hoặc chu kỳ thay thế

Thuộc tính animation-direction chỉ định
liệu hoạt ảnh có nên được phát tiến, lùi hay thay thế hay không
chu kỳ.

Thuộc tính hướng hoạt ảnh có thể có các giá trị sau:

  • normal – Hoạt ảnh được phát như bình thường
    (tiền đạo). Đây là mặc định
  • ngược lại – Hoạt ảnh được phát trong
    hướng ngược lại (ngược)
  • alternate – Hoạt ảnh được phát
    chuyển tiếp trước, sau đó lùi lại
  • alternate-reverse – Hoạt ảnh được phát
    lùi trước, sau đó chuyển tiếp

Ví dụ sau sẽ chạy hoạt ảnh theo hướng ngược lại (ngược):

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
thời lượng hoạt ảnh: 4 giây;
hướng hoạt ảnh:
đảo ngược;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị “thay thế” để tạo hoạt ảnh
chạy tiến trước, sau đó chạy lùi:

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
animation-time: 4 giây;
animation-iteration-count: 2;
hướng hoạt hình:
thay thế;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị “thay thế-đảo ngược” để tạo hoạt ảnh
chạy lùi trước, sau đó chạy tới:

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
animation-time: 4 giây;
animation-iteration-count: 2;
hướng hoạt ảnh:
thay thế-đảo ngược;
}

Hãy tự mình thử »

Chỉ định Đường cong tốc độ của Hoạt ảnh

Thuộc tính animation-timing-function chỉ định đường cong tốc độ của
hoạt hình.

Thuộc tính animation-timing-function có thể có các giá trị sau:

  • easy – Chỉ định hoạt ảnh có bắt đầu chậm, sau đó nhanh, rồi kết thúc chậm (đây là mặc định)
  • linear – Chỉ định một hoạt ảnh có cùng tốc độ từ đầu đến cuối
  • easy-in – Chỉ định hoạt ảnh có khởi động chậm
  • easy-out – Chỉ định hoạt ảnh có kết thúc chậm
  • easy-in-out – Chỉ định hoạt ảnh có phần bắt đầu và kết thúc chậm
  • Cub-bezier (n, n, n, n) – Cho phép bạn xác định các giá trị của riêng mình trong một hàm bậc ba

Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:

Chỉ định chế độ lấp đầy cho hoạt ảnh

Hoạt ảnh CSS không ảnh hưởng đến một phần tử trước khi khung hình chính đầu tiên được phát
hoặc sau khi khung hình chính cuối cùng được phát. Thuộc tính animation-fill-mode có thể
ghi đè hành vi này.

Thuộc tính animation-fill-mode chỉ định một
kiểu cho phần tử đích khi hoạt ảnh không phát (trước nó
bắt đầu, sau khi kết thúc hoặc cả hai).

Thuộc tính chế độ hoạt ảnh có thể có các giá trị sau:

  • none – Giá trị mặc định. Hoạt ảnh sẽ không
    áp dụng bất kỳ kiểu nào cho phần tử trước hoặc sau khi phần tử đang thực thi
  • chuyển tiếp – Phần tử sẽ giữ lại
    giá trị kiểu được đặt bởi khung hình chính cuối cùng (phụ thuộc vào hướng hoạt ảnh
    và số lần lặp lại hoạt ảnh)
  • ngược lại – Phần tử sẽ nhận được kiểu
    các giá trị được đặt bởi khung hình chính đầu tiên (phụ thuộc vào hướng hoạt ảnh) và
    giữ lại điều này trong khoảng thời gian trễ hoạt ảnh
  • cả hai – Hoạt ảnh sẽ tuân theo các quy tắc
    cho cả tiến và lùi, mở rộng các thuộc tính hoạt ảnh trong cả hai
    chỉ đường

Ví dụ sau cho phép & lt; div & gt; phần tử giữ lại các giá trị kiểu từ
khung hình chính cuối cùng khi hoạt ảnh kết thúc:

Xem Thêm  Sự khác biệt giữa A và One trong Ngữ pháp tiếng Anh - a hoặc 1 1

Ví dụ

div {
width: 100px;
height: 100px;
background: red;
position: rel;
animation-name: example;
animation- thời lượng: 3 giây;
animation-fill-mode: chuyển tiếp;
}

Hãy tự mình thử »

Ví dụ sau cho phép & lt; div & gt; phần tử nhận các giá trị kiểu được đặt bởi
khung hình chính đầu tiên trước khi hoạt ảnh bắt đầu (trong khoảng thời gian trễ hoạt ảnh):

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
nền: đỏ;
vị trí: tương đối;
animation-name: example;
thời lượng hoạt ảnh: 3 giây;
animation-delay: 2 giây;
animation-fill-mode: back;
}

Hãy tự mình thử »

Ví dụ sau cho phép & lt; div & gt; phần tử nhận các giá trị kiểu đã đặt
bởi khung hình chính đầu tiên trước khi hoạt ảnh bắt đầu và giữ lại các giá trị kiểu
từ khung hình chính cuối cùng khi hoạt ảnh kết thúc:

Ví dụ

div {
width: 100px;
height: 100px;
background: red;
vị trí: tương đối;
animation-name: example;
thời lượng hoạt ảnh: 3 giây;
animation-delay: 2 giây;
animation-fill-mode: both;
}

Hãy tự mình thử »

Thuộc tính tốc ký hoạt ảnh

Ví dụ dưới đây sử dụng sáu thuộc tính hoạt ảnh:

Ví dụ

div
{
animation-name: example;

thời lượng hoạt ảnh: 5 giây;

animation-timing-function: tuyến tính;

animation-delay: 2 giây;

animation-iteration-count: vô hạn;

hướng hoạt ảnh: thay thế;
}

Hãy tự mình thử »

Có thể đạt được hiệu ứng hoạt ảnh tương tự như trên bằng cách sử dụng tốc ký
Thuộc tính animation :

Ví dụ

div
{
hoạt ảnh: ví dụ 5s tuyến tính 2s xen kẽ vô hạn;
}

Hãy tự mình thử »

Tự kiểm tra bằng các bài tập

Bài tập:

Thêm hoạt ảnh 2 giây cho & lt; div & gt; phần tử này thay đổi màu từ đỏ sang xanh lam. Gọi hoạt ảnh là “ví dụ”.

& lt; phong cách & gt;
div {
  chiều rộng: 100px;
  chiều cao: 100px;
  background-color: đỏ;
  tên-hoạt hình :;
  : 2 giây;
}

Ví dụ về @keyframes {
  từ {: red;}
  thành {: blue;}
}
& lt; / style & gt;

& lt; body & gt;
  & lt; div & gt; Đây là div & lt; / div & gt;
& lt; / body & gt;

Bắt đầu bài tập

Thuộc tính hoạt ảnh CSS

Bảng sau liệt kê quy tắc @keyframes và tất cả các thuộc tính hoạt ảnh CSS:

Tài sản
Sự mô tả

@keyframes
Chỉ định mã hoạt ảnh

hoạt ảnh
Thuộc tính viết tắt để thiết lập tất cả các thuộc tính hoạt ảnh

hoạt ảnh trễ
Chỉ định thời gian trễ để bắt đầu hoạt ảnh

hướng hoạt ảnh
Chỉ định xem một hoạt ảnh sẽ được phát về phía trước, phía sau hoặc
trong các chu kỳ thay thế

thời lượng hoạt ảnh
Chỉ định thời gian hoạt ảnh phải mất để hoàn thành một chu kỳ

animation-fill-mode
Chỉ định kiểu cho phần tử khi hoạt ảnh không phát
(trước khi bắt đầu, sau khi kết thúc hoặc cả hai)

hoạt-động-lặp-đếm
Chỉ định số lần một hoạt ảnh sẽ được phát

tên hoạt hình
Chỉ định tên của hoạt ảnh @keyframes

animation-play-state
Chỉ định hoạt ảnh đang chạy hay bị tạm dừng

hoạt ảnh-thời gian-chức năng
Chỉ định đường cong tốc độ của hoạt ảnh


Xem thêm những thông tin liên quan đến chủ đề lên và xuống hoạt ảnh css

HTML/CSS – Hướng dẫn chèn hình ảnh vào website lấy bất kỳ hình ảnh nào, đóng dấu lên ảnh cực dễ

  • Tác giả: Vũ Lập Trình
  • Ngày đăng: 2022-07-05
  • Đánh giá: 4 ⭐ ( 9681 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: htmlcss – Hướng dẫn chèn up hình ảnh vào website lấy bất kỳ hình ảnh nào, đóng dấu lên ảnh cực dễ uploadanh
    Ở video này mình hướng dẫn các bạn cách đăng ảnh lên trên website của các bạn và hướng dẫn các bạn một số thủ thuật để thay đổi STYLE/CSS của hình ảnh một cách dễ dàng và đơn giản nhất
    Trong video mình cũng hướng dẫn các bạn cách để có thể tạo được CSS đồng loạt các hình ảnh để có thể làm đẹp được hình ảnh. Các bạn xem video nhớ xem kĩ đừng tua hoặc bỏ qua nhé có thể tăng tốc video cũng được
    Mình cũng đóng gói file nguồn hướng dẫn các bạn có thể tải ở link hướng dẫn bên dưới để về tham khảo. Bạn cũng có thể tải về sau đó giải nén ra lấy nội dung ở trong phần mình đã note ở trong file. Trong video mình hướng dẫn một cách có thể tạo CSS hàng loạt ảnh mà không phải căn chỉnh từng ảnh rất mất thời gian. Ngoài ra trong video mình hướng dẫn các bạn cách để có thể đóng dấu ảnh tránh bị ăn cắp hoặc lấy link từ website của các bạn khiến đối thủ khó khăn hơn trong việc tải ảnh từ website của các bạn, nếu thấy có khó khăn thắc mắc gì vui lòng để lại bình luận, mình sẽ giải đáp.
    Video mình cũng hướng dẫn tối ưu hình ảnh ở trong trình duyệt điện thoại khiến hình ảnh được đẹp hơn các bạn nhớ xem kỹ nhé
    Chúc các bạn thành công

    Video khác liên quan:
    ️🏅 Cài đặt tên miền trên localhost Ampps: https://youtu.be/0rlkqiKaLPM
    ️🏅 lighshot Chi tiết chụp ảnh màn hình đơn giản: https://youtu.be/iw5TVsKwIIE
    🏅 Tải source tài liệu: https://thietkeweb24h.org/temp/301.php?u=file/d/1rDMXNnEZIF47Jto9l0p_fUGwkkPM8c13/view?usp=sharing

    Tìm kiếm: https://www.youtube.com/results?search_query=v%C5%A9+l%E1%BA%ADp+tr%C3%ACnh+up+%E1%BA%A3nh+website

    🔝Đăng ký ngay: https://bit.ly/vulaptrinh
    🔝Video của mình: https://youtu.be/04L8uDEeKDI
    🔝Latest Videos: https://www.youtube.com/channel/UCCypyfIUtMJcL7c8GcGO4Vw/videos
    .
    Xem thêm video khác của Vũ Lập Trình:
    ️🏅 Tool tạo page auto/ reg page tự động: https://youtu.be/hwEtNjUgo9A
    ️🏅 Tool tự động đăng nhập Facebook: https://youtu.be/Q6LR1MO9crA
    ️🏅 Chuyển đổi file pdf sang word thành công 100%: https://youtu.be/YvITGMFRqrE

    Xem Playlist của Vũ Lập Trình Channel:
    👨‍🏫 Share Tool Facebook: https://www.youtube.com/watch?v=hwEtNjUgo9A&list=PL9p3LjkOhAgjamRpHkXJDTiauvXmmgV0T
    👨‍🏫 Thủ thuật PC: https://www.youtube.com/watch?v=iw5TVsKwIIE&list=PL9p3LjkOhAghgLMEq1VGLpp3yfh6uqPGI

    Sau khi bạn xem video, nếu bạn có thêm bất kỳ câu hỏi, thắc mắc nào cần tư vấn về video vui lòng để lại bình luận bên dưới và Vũ sẽ cố gắng hết sức để giải đáp thắc mắc cho bạn!

    ✅Mình hy vọng bạn thích kênh của mình và đăng ký, bình luận, chia sẻ nó với bạn bè của bạn.
    ✅Đăng ký ngay: https://bit.ly/vulaptrinh
    .
    Góp ý chat comment nhé mọi người!
    Xem phần mềm: https://thietkeweb24h.org/phan-mem
    Hotline/Zalo: 0914025329 vulaptrinh
    ► Donate ủng hộ để Kênh có kinh Phí duy trì và Phát Triển
    TECHCOMBANK: Nguyen Dinh Vu – 10322704315010
    Paypal: https://www.paypal.com/paypalme/NguyenVu666

    ️🏅️- Thay vì bạn bỏ tiền ra thuê hay mua tool reg clone.
    ️🏅️🏅️- Thì mình hãy mua khóa học về tự làm để được sử dụng miễn phí nhé.
    ️🏅️🏅️🏅==Liên hệ mua khóa học qua zalo 0914025329

    Đăng ký kênh và góp ý mình làm thêm nhé, Thanks mọi người

    Tag liên quan: Vũ lập trình, thủ thuật pc, vu lap trinh, Cách chèn hình ảnh vào website, Thêm hình ảnh vào website, Tag img, Học html css cơ bản, chèn hình ảnh, chèn hình ảnh vào web, cách chèn hình ảnh vào website, thêm hình ảnh vào website, cách chèn hình ảnh vào powerpoint, cách chèn chữ vào hình ảnh, upload images, up ảnh website, ảnh website, thêm ảnh website, thêm ảnh vào web, thêm img vào web, thêm img vào website, upload image website, upload images web, upload images website

8 Đoạn mã CSS & JavaScript để tạo hoạt ảnh thực tế

  • Tác giả: gialaipc.com.vn
  • Đánh giá: 5 ⭐ ( 7292 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [ad_1]

    Chúng tôi nói điều đó mọi lúc vì đó là sự thật: CSS và JavaScript có khả năng tạo ra một số kỳ công đáng kinh

Bài 28: Cách tạo animation trong css

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 9207 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài 28, mình sẽ hướng dẫn các bạn cách tạo animation trong css. Trong bài 26 chúng ta đã biết cách tạo hiệu ứng zoom khi hover vào đối tạo. Nội dung animation ngày hôm nay sẽ là tạo động zoom hình ảnh và chạy chữ như powerpoint trên giao diện web.

[CSS] Bài 16 – Các Hoạt Ảnh Tự Tạo

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9564 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ nói về việc tạo ra các hoạt ảnh phức tạp. Các ví dụ trong bài viết này yêu cầu các trình duyệt web được cập nhật với phiên bản được phát hành gần đây.

Hướng dẫn tạo ảnh động CSS

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 5873 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách thức hoạt động của HTML, CSS và JavaScript

  • Tác giả: nordiccoder.com
  • Đánh giá: 3 ⭐ ( 4372 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tôi có thể có hiệu ứng onclick trong CSS không?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 2801 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cách gần nhất bạn sẽ nhận được là :active: #btnLeft:active { width: 70px; height: 74px; }…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hiển thị XML - cách hiển thị trong xml