Ngôn ngữ HTML cung cấp cấu trúc của trang web và CSS cung cấp thiết kế và định dạng của ứng dụng đó. Sự kết hợp này cũng cho phép bạn thêm hình ảnh động, vì các phần tử hoạt hình trông hấp dẫn hơn so với các phần tử tĩnh. Nó cũng cho phép một phần tử thay đổi phong cách dần dần.
Bài viết này sẽ hướng dẫn cách chúng ta có thể áp dụng hoạt ảnh cho các phần tử. Vì vậy, hãy bắt đầu!
CSS Animation Keyframes là gì?
Để hoàn thành hoạt ảnh, chúng ta phải liên kết hoạt ảnh với phần tử HTML. Với mục đích này, hãy sử dụng từ khóa “ @keyframes ” theo sau là tên hoạt hình. Thành phần này chỉ định bắt đầu và kết thúc hoạt ảnh.
Làm cách nào để thiết lập Khung hình chính CSS Animation?
Để thiết lập khung hình chính hoạt ảnh trong CSS, chúng ta sẽ xem qua hai ví dụ.
ví dụ 1
Để thiết lập khung hình chính hoạt hình trong CSS, hãy thực hiện các bước sau:
-
- Thêm một có tên lớp “ div chính ”.
- Bên trong div, thêm một div khác với tên lớp “ img-peng ”.
- Bên trong div img-peng này, thêm
để đặt hình ảnh. Thẻ này có ba thuộc tính, “ src ” thuộc tính để cung cấp đường dẫn hình ảnh, “ mọi điều ” là văn bản thay thế được thêm vào nếu hình ảnh không được hiển thị và “ bề rộng ” để cung cấp chiều rộng của hình ảnh.
HTML
< div lớp = 'div chính' >
< div lớp = 'img-peng' >
< hình ảnh src = 'hình ảnh/penguin.png' mọi điều = 'chim cánh cụt' bề rộng = '100' >
div >
div >
.main-div {
CSS
bề rộng: 90 % ;
chiều cao: 90px;
màu nền: rgb ( 67 , 66 , 87 ) ;
lề: 20px tự động;
phần đệm: 10px;
}
Trong CSS, “ .main-div ” được thêm vào để truy cập lớp div. Các thuộc tính áp dụng cho nó được giải thích dưới đây:-
- “ bề rộng ” giá trị thuộc tính xác định chiều rộng của div.
- “ Chiều cao ” thuộc tính được sử dụng để đặt chiều cao của div.
- “ màu nền ” thuộc tính áp dụng màu cho nền của phần tử.
- “ lề ” được đặt là “ ô tô 20px ”, cho biết khoảng cách từ trên xuống dưới và tự động có nghĩa là khoảng cách bằng nhau từ bên trái và bên phải.
- “ đệm ” giá trị thuộc tính được chỉ định là 10px, áp dụng không gian xung quanh nội dung của phần tử.
Phong cách lớp img-peng
.img-peng {
chiều rộng: 50px;
chiều cao: 100px;
vị trí: tương đối;
hoạt hình: lắc;
thời lượng hoạt hình: 2s;
hoạt hình-thời gian-chức năng: 2s;
hoạt hình-lặp-đếm: vô hạn;
}
Các ' .img-peng ” được sử dụng để truy cập lớp div, được đề cập trong tệp HTML ở trên. Phần tử div này được tạo kiểu với các thuộc tính được thảo luận bên dưới:-
- “ bề rộng ” giá trị thuộc tính được sử dụng để đặt chiều rộng của phần tử.
- “ Chiều cao ” giá trị thuộc tính được sử dụng để đặt chiều cao của phần tử.
- “ Chức vụ ” thuộc tính được gán giá trị “ quan hệ ”, có nghĩa là nó sẽ được định vị so với vị trí bình thường của nó.
- “ hoạt hình ” tên được đặt là “ rung chuyển ”. Tuy nhiên, bạn có thể đặt tên hoạt hình theo yêu cầu.
- “ Thời lượng hoạt ảnh ” biểu thị thời lượng của hoạt ảnh, là 2 giây.
- “ hoạt hình-thời gian-chức năng ” được gán giá trị là 2s nghĩa là trong 2 giây hoạt ảnh hoàn thành.
- “ hoạt hình-lặp lại-đếm ” được đặt là vô hạn, có nghĩa là hoạt ảnh này sẽ diễn ra trong thời gian vô hạn.
Xác định @keyframes Với từ khóa đến và từ khóa
@ khung hình chính rung {
từ {
trên cùng: 50px;
}
đến {
lề dưới: 200px;
}
}
Mô tả về các khung hình chính hoạt hình được đặt thành hình ảnh được liệt kê bên dưới:-
- “ @keyframes lắc ” đề cập đến tên hoạt hình rung theo sau là từ khóa @keyframes. Trong quy tắc này, hành vi của hoạt ảnh được chỉ định.
- Bên trong dấu ngoặc nhọn của nó, “ từ ' và ' đến ” từ khóa chỉ định các khoảng thời gian khác nhau để xác định hành vi hoạt ảnh.
- Các ' đứng đầu ” thuộc tính được gán giá trị 50px, có nghĩa là hoạt ảnh bắt đầu từ 50px từ đầu màn hình và tiếp tục đến 200px ở dưới cùng.
Kết quả là, bạn sẽ thấy đầu ra sau:
Bây giờ, hãy để hoạt ảnh hoạt động khác nhau ở các khoảng thời gian khác nhau. Để làm như vậy, hãy sử dụng tỷ lệ phần trăm hoạt ảnh trong @keyframes.Chỉ định @keyframes với tỷ lệ phần trăm
@ khung hình chính rung {
0 % {
bên trái: -50px ;
}
25 % {
trái: 50px;
}
năm mươi % {
bên trái: -25px ;
}
75 % {
trái: 25px;
}
100 % {
trái: 10px;
}
}
Vì vậy, mô tả của đoạn mã trên được đề cập ở đây:-
- Các giá trị phần trăm 0%, 25%, 50%, 75% và 100% biểu thị hoạt ảnh ở các khoảng thời gian khác nhau.
- Hơn nữa, ở mức 0%, khoảng trống ở bên trái của hình ảnh sẽ là “ -50px ”. Ở mức 25%, khoảng trống bên trái sẽ là “ 50px ”. Ở mức 50%, khoảng trống bên trái sẽ là “ -25px ”. Ở mức 75%, khoảng trống bên trái sẽ là “ 25px ” và khi hoạt ảnh hoàn thành (100%), khoảng trống bên trái sẽ là “ 10px ”.
Đoạn mã trên hiển thị hình ảnh động sau:
Hãy lấy một ví dụ khác để xem cách chúng ta có thể đặt hoạt ảnh cho hình ảnh.ví dụ 2
Trong HTML, thêm một
có tên lớp “ Trang chính ”. Bên trong phần tửnày, đặt thêm hai thẻ div với các lớp “ đám mây1 ' và ' đám mây2 ', tương ứng.HTML
< div lớp = 'Trang chính' >
< div lớp = 'đám mây1' > div >
< div lớp = 'đám mây2' > div >
div >
thân hình {
CSS
lề: 0 ;
đệm: 0 ;
}
Trong CSS, chúng ta sẽ gán các thuộc tính CSS sau cho phần tử body:-
- “ lề ” là 0 chỉ định không có khoảng trống xung quanh phần tử.
- “ đệm ” với giá trị 0 chỉ định không có khoảng trống xung quanh nội dung của phần tử.
Kiểu div trang chính
.Trang chính {
hình nền: url ( / hình ảnh / sói-đêm.png ) ;
lặp lại nền: không lặp lại;
kích thước nền: bìa;
chiều cao: 100vh;
vị trí: tương đối;
tràn: ẩn;
}
Nơi đây:-
- “ .Trang chính ” được sử dụng để truy cập lớp div.
- “ hình nền ” thuộc tính được gán giá trị “ url(/images/wolf-night.png) ” trong đó hình ảnh là thư mục chứa hình ảnh wolf-night.png.
- “ Bối cảnh Lặp lại ” thuộc tính được gán giá trị “ không lặp lại , có nghĩa là hình ảnh sẽ được hiển thị một lần.
- “ kích thước nền ” được đặt là “ trải ra ” để điền vào toàn bộ phần tử div.
- “ Chiều cao ” là 100vh, bằng 100% chiều cao của khung nhìn.
- “ Chức vụ ” với tư cách là người thân đặt vị trí hình ảnh so với vị trí hiện tại của nó.
- “ tràn ra ” giá trị của thuộc tính được đặt là ẩn để ẩn phần hình ảnh quá lớn không vừa với vùng chứa.
Kiểu đám mây1 lớp
.cloud1 {
hình nền: url ( / hình ảnh / đám mây.png ) ;
kích thước nền: chứa;
lặp lại nền: không lặp lại;
vị trí: tuyệt đối;
trên cùng: 100px;
chiều rộng: 500px;
chiều cao: 300px;
hoạt hình: cloudanimation1;
thời lượng hoạt hình: 70 giây;
hoạt hình-lặp-đếm: vô hạn;
}
Lớp div cloud1 được áp dụng với các thuộc tính được giải thích sau:-
- “ .cloud1 ” được sử dụng để truy cập lớp div cloud1.
- “ hình nền ” thuộc tính được đặt là url(/images/cloud.png), trong đó hình ảnh là thư mục chứa hình ảnh cloud.png.
- “ kích thước nền ” với giá trị“ Lưu trữ ” đảm bảo khả năng hiển thị của hình ảnh.
- “ Bối cảnh Lặp lại ” thuộc tính với giá trị được đặt là “ không lặp lại ” hiển thị hình ảnh là không lặp lại.
- “ Chức vụ ” làm vị trí tuyệt đối của hình ảnh so với phần tử gốc của nó.
- “ đứng đầu ” đặt hình ảnh ở 100px từ trên xuống.
- “ bề rộng ” thuộc tính được sử dụng để đặt chiều rộng của phần tử div thành 500px.
- “ Chiều cao ” thuộc tính được sử dụng để đặt chiều cao của phần tử div thành 300px.
- “ hoạt hình ” được gán tên cloudanimation1.
- “ Thời lượng hoạt ảnh ” biểu thị thời lượng của hoạt ảnh, là 70 giây.
- “ hoạt hình-lặp lại-đếm ” được gán giá trị vô hạn, giá trị này sẽ lặp lại hoạt ảnh vô hạn lần.
Cho đến nay, chúng tôi đã áp dụng các thuộc tính CSS cho trang chính của lớp div và cloud1. Bây giờ, trong phần tiếp theo, chúng ta sẽ tạo kiểu cho lớp div tiếp theo có tên là cloud2.
Phong cách lớp cloud2
.cloud2 {
hình nền: url ( / hình ảnh / đám mây.png ) ;
kích thước nền: chứa;
lặp lại nền: không lặp lại;
vị trí: tuyệt đối;
trên cùng: 50px;
chiều rộng: 200px;
chiều cao: 300px;
hoạt hình: cloudanimation2;
thời lượng hoạt hình: 15 giây;
hoạt hình-lặp-đếm: vô hạn;
}
Lớp div cloud2 được áp dụng với các thuộc tính được giải thích bên dưới:-
- “ .cloud2 ” được sử dụng để truy cập lớp cloud2.
- “ hình nền ” thuộc tính được đặt là url(/images/cloud.png), trong đó hình ảnh là một thư mục chứa hình ảnh cloud.png.
- “ kích thước nền ” chứa một giá trị đảm bảo khả năng hiển thị của hình ảnh.
- “ Bối cảnh Lặp lại ” với giá trị được đặt là không lặp lại sẽ hiển thị hình ảnh là không lặp lại.
- “ Chức vụ ” làm vị trí tuyệt đối của hình ảnh so với phần tử gốc của nó.
- “ đứng đầu ” đặt hình ảnh ở 100px từ trên xuống.
- “ bề rộng ” thuộc tính được sử dụng để đặt chiều rộng của phần tử div.
- “ Chiều cao ” thuộc tính được sử dụng để đặt chiều cao của phần tử div.
- “ hoạt hình ” được gán tên cloudanimation2.
- “ Thời lượng hoạt ảnh ” đại diện cho thời lượng của hoạt ảnh.
- “ hoạt hình-lặp lại-đếm ” được gán giá trị vô hạn, giá trị này sẽ lặp lại hoạt ảnh vô hạn lần.
Chỉ định @keyframes cho cloudanimation1
@ khung hình chính cloudanimation1 {
đến {
trái: 0px;
}
từ {
bên trái: 100 % ;
}
}
Div cloud1 được liên kết với hoạt ảnh được mô tả bên dưới:-
- “ @keyframes cloudanimation1 ” tên của hoạt ảnh cloudanimation1 được theo sau bởi từ khóa @keyframes được sử dụng để chỉ định quá trình chuyển đổi.
- Từ khóa @keyframes chỉ định cách hoạt ảnh được thực hiện từ đầu đến cuối trên hình ảnh đám mây.
- Các ' đến ' và ' từ ” từ khóa chỉ định cloud1 sẽ chuyển từ 100% sang 0px của màn hình.
Chỉ định @keyframes cho cloudanimation2
@ khung hình chính cloudanimation2 {
0 % {
bên trái: 0 % ;
}
100 % {
bên trái: 100 % ;
}
}
Lớp div cloud2 được liên kết với hoạt ảnh được giải thích bên dưới:-
- “ @keyframes cloudanimation2 ” đại diện cho tên hoạt ảnh cloudanimation2 theo sau là từ khóa @keyframes được sử dụng để chỉ định hoạt ảnh.
- Các ' 0% ' và ' 100% ” đại diện cho điểm bắt đầu và kết thúc của hoạt ảnh.
- Ở mức 0% của hoạt ảnh, đám mây sẽ ở bên trái với giá trị được đặt là 0% và nó sẽ dần dần di chuyển đến 100% chiều rộng.
đầu ra
Điều đó thật tuyệt! Chúng ta đã thảo luận về cách chúng ta có thể chỉ định hoạt ảnh cho các thành phần bằng cách sử dụng từ khóa @keyframes thành công.Sự kết luận
CSS cho phép chúng ta áp dụng các kiểu cho các phần tử HTML. Hoạt hình trong CSS thực hiện chuyển đổi từ kiểu này sang kiểu khác. Nó bao gồm hai thành phần, kiểu hoạt ảnh và khung hình chính. Các kiểu hoạt ảnh đại diện cho các thuộc tính khác nhau như tên, thời lượng hoạt ảnh, số lần lặp lại hoạt ảnh, v.v. Trong khi thành phần khung hình chính xác định phần đầu và phần cuối của hoạt ảnh. Hướng dẫn này đã xây dựng chi tiết về cách thiết lập khung hình chính hoạt hình với các ví dụ.
- Thêm một