Lưu ý. khi sử dụng hình ảnh làm nền, thì bạn nên sử dụng hình ảnh mà nó không gây ảnh hưởng lên các văn bản. If not image that will over over or doing Mờ chữ hoặc nội dung trang web của bạn
Dưới đây là ví dụ về sự kết hợp không tốt giữa văn bản và nền [hình nền]
Ví dụ 4
body {
hình nền. url[“bgdesert. jpg”];
}
Hình nền – lặp lại ảnh theo chiều dọc hoặc ngang
Mặc định thì thuộc tính background-image sẽ phù hợp với cả 2 dạng dọc và ngang [ngang và dọc]
Một số ảnh nên được đặt ngang hoặc dọc, nếu không thì trông nó rất xấu, không đẹp mắt, giống như sau
Ví dụ 5
body {
hình nền. url[“gradient_bg. png”];
}
If as the image on only was repeat on the width [background-repeat. repeat-x;], thì sẽ trông tốt hơn
Ví dụ 6
body {
hình nền. url[“gradient_bg. png”];
background-repeat. lặp lại-x;
}
Lưu ý. Để lặp lại một hình ảnh theo chiều dọc [vertical], chúng ta đặt lặp lại nền. lặp lại-y;
Hình nền – Vị trí thiết lập và không khớp
Để hiển thị hình nền chỉ một lần cũng được xác định bởi thuộc tính lặp lại nền
Ví dụ 7
body {
hình nền. url[“img_tree. png”];
background-repeat. không lặp lại;
}
Trong ví dụ trên hình nền hiển thị cùng nơi với văn bản. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không che khuất văn bản quá nhiều
Vị trí của hình ảnh được xác định với thuộc tính background-position
Ví dụ 8
body {
hình nền. url[“img_tree. png”];
background-repeat. không lặp lại;
vị trí nền. trên cùng bên phải;
}
Hình nền – Cố định vị trí
Để chỉ định hình nền sẽ cố định [tức là nó sẽ không bị mất di chuyển khi cuộn], sử dụng thuộc tính background-attachment
Ví dụ 9
body {
hình nền. url[“img_tree. png”];
background-repeat. không lặp lại;
vị trí nền. trên cùng bên phải;
background-attachment. đã sửa;
}
Thuộc tính nền – Viết mã ngắn
Để rút ngắn mã, bạn có thể chỉ định tất cả các thuộc tính nền trên cùng một dòng duy nhất. Nó được gọi là thuộc tính Tốc ký
Ví dụ 10
cơ thể {
nền. #ffffff url[“img_tree. png”] không lặp lại trên cùng bên phải;
}
Khi sử dụng tốc ký thuộc tính thì thứ tự giá trị thuộc tính sẽ là
- màu nền
- hình nền
- Bối cảnh Lặp lại
- tệp đính kèm nền
- vị trí nền
Nếu nhu cầu của bạn không cần sử dụng hết thuộc tính này trong tốc ký thì không quan trọng, bạn chỉ việc không đưa nó vào miễn phí sao linh hoạt theo thứ tự như trên đã được
Thuộc tính giá trị Ví dụ Mô tả background-attachment fixedscroll background-attachment. đã sửa; .
Được sử dụng kèm theo giá trị màu nền-màu nền hình ảnh
tên màu
Giá trị màu nền rgb. #ff0000;
màu nền. màu đỏ;
màu nền. rgb[255,0,0]; . url hình nền[đường dẫn hình] hình nền. url[ico_arrow. gif]; . vị trí nền trái
phải
trên
dưới
px
% background-position: left top; Xác định vị trí hình ảnh nền cho thành phần.
Được sử dụng kèm theo giá trị nền-hình ảnh. lặp lại trong nền lặp lại-x
lặp lại-y
lặp lại
lặp lại không lặp lại trong nền. lặp lại-x; . nền Một hoặc nhiều giá trị của các thuộc tính trên nền. url[ico_arrow. gif] lặp lại-x trên cùng bên trái; .
Thuộc tính@keyframes43. 010. 016. 09. 030. 0animation-name43. 010. 016. 09. 030. 0animation-duration43. 010. 016. 09. 030. 0animation-delay43. 010. 016. 09. 030. 0animation-iteration-count43. 010. 016. 09. 030. 0animation-direction43. 010. 016. 09. 030. 0animation-timing-function43. 010. 016. 09. 030. 0animation-fill-mode43. 010. 016. 09. 030. 0animation43. 010. 016. 09. 030. 0
Ảnh động CSS là gì?
Hoạt ảnh cho phép một phần tử thay đổi dần dần từ kiểu này sang kiểu khác
Bạn có thể thay đổi bao nhiêu thuộc tính CSS tùy thích, bao nhiêu lần tùy thích
Để 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 ảnh
Các khung hình chính giữ các 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 các kiểu CSS bên trong quy tắc @keyframes
, hoạt ảnh sẽ dần 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 "ví dụ" với
yếu tố. Hoạt ảnh sẽ kéo dài trong 4 giây và nó sẽ dần dần thay đổi màu nền của
phần tử từ "đỏ" sang "vàng"
Thí dụ
/* Mã hoạt ảnh */
@keyframes ví dụ {
từ {background-color. đỏ;}
thành {background-color. màu vàng;}
}
/* Phần tử để áp dụng hoạt ảnh cho */
div {
chiều rộng. 100px;
chiều cao. 100px;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
thời lượng hoạt ảnh. 4s;
}
Ghi chú. Thuộc tính animation-duration
xác định thời gian hoàn thành hoạt ảnh. Nếu thuộc tính animation-duration
không được chỉ định, sẽ không có hoạt ảnh nào xảy ra vì giá trị mặc định là 0 giây [0 giây].
Trong ví dụ trên, chúng tôi đã chỉ định thời điểm kiểu sẽ thay đổi bằng cách sử dụng 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 kiểu tùy thích
Ví dụ sau sẽ thay đổi màu nền của
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%
Thí dụ
/* Mã hoạt ảnh */
@keyframes ví dụ {
0% {background-color. đỏ;}
25% {background-color. vàng;}
50% {background-color. xanh da trời;}
100% {background-color. màu xanh lục;}
}
/* Phần tử để áp dụng hoạt ảnh cho */
div {
chiều rộng. 100px;
chiều cao. 100px;
màu nền. màu đỏ;
tên hoạt ảnh. ví dụ;
thời lượng hoạt ảnh. 4s;
}
Ví dụ sau sẽ thay đổi cả màu nền và vị trí của
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%
Thí dụ
/* Mã hoạt ảnh */
@keyframes ví dụ {
0% {background-color. màu đỏ; . 0px; . 0px;}
25% {background-color. màu vàng; . 200px; . 0px;}
50% {background-color. màu xanh da trời; . 200px; . 200px;}
75% {background-color. màu xanh lá; . 0px; . 200px;}
100% {background-color. màu đỏ; . 0px; . 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;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
thời lượng hoạt ảnh. 4s;
}
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
Thí dụ
div {
chiều rộng. 100px;
chiều cao. 100px;
vị trí. tương đối;
màu nền. màu đỏ;
tên hoạt ảnh. ví dụ;
thời lượng hoạt ảnh. 4s;
độ trễ hình ảnh động. 2 giây;
}
Giá trị âm cũng được cho phép. Nếu sử dụng các giá trị âm, hoạt ảnh sẽ bắt đầu như thể nó đã được phát trong N giây
Trong ví dụ sau, hoạt ảnh sẽ bắt đầu như thể nó đã phát được 2 giây
Thí dụ
div {
chiều rộng. 100px;
chiều cao. 100px;
vị trí. tương đối;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
thời lượng hoạt ảnh. 4s;
độ trễ hình ảnh động. -2s;
}
Đặt số lần hoạt ảnh sẽ chạy
Thuộc tính animation-iteration-count
chỉ định số lần hoạt ảnh sẽ chạy
Ví dụ sau sẽ chạy hoạt ảnh 3 lần trước khi dừng
Thí dụ
div {
chiều rộng. 100px;
chiều cao. 100px;
vị trí. tương đối;
màu nền. màu đỏ;
tên hoạt ảnh. ví dụ;
thời lượng hoạt ảnh. 4s;
animation-iteration-count. 3;
}
Ví dụ sau sử dụng giá trị "infinite" để làm cho hoạt ảnh tiếp tục mãi mãi
Thí dụ
div {
chiều rộng. 100px;
chiều cao. 100px;
vị trí. tương đối;
màu nền. màu đỏ;
tên hoạt ảnh. ví dụ;
thời lượng hoạt ảnh. 4s;
hoạt ảnh-lặp-đếm. vô hạn;
}
Chạy hoạt hình theo hướng ngược lại hoặc chu kỳ thay thế
Thuộc tính animation-direction
chỉ định xem hoạt ảnh sẽ được phát tiến, lùi hay theo chu kỳ thay thế
Thuộc tính animation-direction có thể có các giá trị sau
@keyframes
6 - Hoạt hình được phát như bình thường [chuyển tiếp]. Đây là mặc định@keyframes
7 - Hoạt hình được phát theo hướng ngược lại [ngược lại]@keyframes
8- Hoạt hình được phát tới trước, sau đó phát ngược lại@keyframes
9 - Hoạt hình được phát ngược trước, sau đó phát tiếp
Ví dụ sau sẽ chạy hoạt hình theo hướng ngược lại [ngược]
Thí dụ
div {
chiều rộng. 100px;
chiều cao. 100px;
vị trí. tương đối;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
thời lượng hoạt ảnh. 4s;
hướng hoạt ảnh. đảo ngược;
}
Ví dụ sau sử dụng giá trị "alternate" để làm cho hoạt ảnh chạy về phía trước, sau đó chạy ngược lại
Thí dụ
div {
chiều rộng. 100px;
chiều cao. 100px;
vị trí. tương đối;
màu nền. màu đỏ;
tên hoạt ảnh. ví dụ;
thời lượng hoạt ảnh. 4s;
animation-iteration-count. 2;
hướng hoạt ảnh. thay thế;
}
Ví dụ sau sử dụng giá trị "alternate-reverse" để làm cho hoạt ảnh chạy ngược trước, sau đó chuyển tiếp
Thí dụ
div {
chiều rộng. 100px;
chiều cao. 100px;
vị trí. tương đối;
màu nền. màu đỏ;
tên hoạt ảnh. ví dụ;
thời lượng hoạt ảnh. 4s;
animation-iteration-count. 2;
hướng hoạt ảnh. luân phiên đảo ngược;
}
Chỉ định Đường cong Tốc độ của Hoạt hình
Thuộc tính animation-duration
0 chỉ định đường cong tốc độ của hoạt ảnh
Thuộc tính animation-timing-function có thể có các giá trị sau
animation-duration
11 - Chỉ định hoạt ảnh bắt đầu chậm, sau đó nhanh, rồi kết thúc chậm [đây là mặc định]animation-duration
12 - Chỉ định hoạt ảnh có cùng tốc độ từ đầu đến cuốianimation-duration
13 - Chỉ định hoạt ảnh bắt đầu chậmanimation-duration
14 - Chỉ định hoạt ảnh có kết thúc chậmanimation-duration
15 - Chỉ định hoạt ảnh bắt đầu và kết thúc chậmanimation-duration
16 - 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
Thí dụ
#div1 {animation-timing-function. tuyến tính;}
#div2 {animation-timing-function. dễ dàng;}
#div3 {animation-timing-function. dễ sử dụng;}
#div4 {animation-timing-function. dễ dàng thoát ra;}
#div5 {animation-timing-function. dễ dàng vào ra;}
Chỉ định chế độ lấp đầy cho một hình ảnh động
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-duration
7 chỉ định kiểu cho phần tử đích khi hoạt ảnh không phát [trước khi bắt đầu, sau khi kết thúc hoặc cả hai]