programming css

Di chuột di chuyển lên css

Gần đây mình đang tìm hiểu về Css animation, chắc nhiều bạn cũng biết, với sự phát triển của html hiện tại, chúng ta có thể tạo ra rất nhiều hiệu ứng đẹp, mà không cần can thiệp JS, khác hẳn với những bài học . Tuy nhiên, để tạo ra hiệu ứng như vậy không hề đơn giản, cần nhiều sự kết hợp của các thuộc tính CSS khác nhau. Vì vậy, mình sẽ viết vài bài giới thiệu và giải thích về 1 số thuộc tính cơ bản để tạo nên hiệu ứng. First post will be about. chuyển tiếp

Tìm hiểu quá trình chuyển đổi

CSS Transition là gì?

Quá trình chuyển đổi CSS là xác định 1 quá trình chuyển đổi khi có 1 hành động. Nói dễ hiểu bằng ví dụ. bạn có 1 khối

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

2 nền trắng, khi di chuột vào thì nền của khối

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

2 sẽ chuyển sang màu đỏ. Do đó quá trình chuyển đổi màu nền từ màu trắng sang màu đỏ theo hành động di chuột chính là quá trình chuyển đổi. Khi bạn bỏ chuột di chuột khỏi khối đó, bạn sẽ thấy nó chuyển về như cũ

Button 1

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

Ví dụ này, bạn sẽ thấy quá trình chuyển đổi màu sắc quá nhanh, tạo cảm giác giống như nút tắt/bật [bật/tắt] đó. Do đó, để có thể điều khiển được mọi thứ bên trong quá trình chuyển đổi, chúng ta sẽ cần thêm một vài thuộc tính điều khiển quá trình [chuyển đổi] này. 2 thuộc tính cơ bản nhất để trực quan hóa quá trình chuyển đổi để bạn có thể nhìn thấy đó là

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

4 và

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

Chuyển đổi thời gian diễn ra.

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

4. Thuộc tính này giúp bạn quyết định độ dài của quá trình chuyển đổi - chính là thời gian để thuộc tính chuyển từ trạng thái ban đầu sang trạng thái cuối cùng mong muốn. Bạn có thể chọn đơn vị seconds

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

7 or milliseconds

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

8 cho thuộc tính

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

Thuộc tính tùy chọn sẽ thực hiện chuyển đổi.

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

5. Giả sử trong quá trình di chuột trên kia, bạn muốn

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

11 không thể xen vào quá trình chuyển đổi, và chỉ có thể kéo dài 2 giây cho việc chuyển đổi màu chữ giả. Khi đó hãy chọn trực tiếp thuộc tính chuyển đổi và thời gian chuyển đổi. [xem code pen tại đây]

Giờ nhờ có việc lựa chọn thuộc tính

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

5 và thời gian chuyển trạng thái

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

4 trông giống như

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

14 của chúng ta đã chuyển trạng thái mượt mà và nhìn hơn lúc đầu rồi

tùy chọn chuyển tiếp

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

15 Nghe qua nhiều người sẽ liên tưởng đến quá trình chuyển tiếp ở trên phải không? .

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

15 giúp bạn điều khiển được các giai đoạn chuyển đổi trạng thái cho Element của bạn nhé, còn

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

4 chỉ quyết định tổng thời gian diễn ra hết chuyển đổi mà thôi. There are 5 value for

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

19. thay đổi bắt đầu chậm, sau đó tăng dần vận tốc, rồi chậm lại và dừng lại

```
Button 1
```
00. Vận tốc không thay đổi trong cả quá trình thay đổi trạng thái
```
Button 1
```
01. Vận tốc tăng chậm từ 0, tăng dần đến khi có thể đến đích [tất nhiên là không được dừng luôn. v]
```
Button 1
```
02. Vận tốc lúc đầu lớn, sau đó chậm lại trước khi cán đích [ngược lại với
```
Button 1
```
01]

____204. Bắt đầu chuyển động chậm rãi, rồi tăng tốc ở giai đoạn giữa, sau đó lại chậm lại [không phải

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

19 là mấy nhỉ

]

Dưới đây có 1 ví dụ để mọi người thấy dễ hơn [đừng quá chú ý đoạn mã chuyển đổi, bài sau mình sẽ giải thích]

Button 1

06. Đây là thuộc tính quyết định độ lớn của hành động - tức là khi bạn chọn. bắt đầu, nó sẽ dừng vài giây, rồi mới bắt đầu chuyển động. Có 2 loại giá trị như

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

4. giây

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

7 và mili giây

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

Giờ bạn thử thêm

Button 1

06 vào ví dụ xem đầu tiên nhé

Những cách khác nhau để viết thuộc tính chuyển đổi

Ở ví dụ đầu tiên với Nút 2, chúng tôi đã áp dụng thuộc tính chuyển tiếp lên thuộc tính

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

11 của nút 2 này

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

Kết quả là màu chữ được đổi 'mượt' trong 2s khi hover, còn màu nền thì thoắt chuyển màu, không được 'mượt' cho lắm. Tuy nhiên, chúng ta muốn chuyển đổi với nhiều thuộc tính, ví dụ như muốn cả chữ và màu nên cùng chuyển đổi 'trơn tru' thì sao? .

Button 1

Thử tự động thực hiện nhé

Với các thuộc tính đã được liệt kê trong bảng kê của

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

12, đừng quên xác định trạng thái sau khi thay đổi nhé [ví dụ đổi màu khi di chuột hết hạn . Nếu bạn có rất nhiều thuộc tính cần thay đổi, mà liệt kê hết vào quá trình chuyển đổi thì còn lâu, khi đó bạn mới có thể sử dụng được.

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

Ngoài ra, bạn có thể rút gọn còn 1 dòng như sau

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

Như trên thì liệt kê các thuộc tính chuyển tiếp với thời lượng, tùy chọn, độ trễ riêng đều được viết trên 1 dòng, và các thuộc tính này cách nhau bởi dấu

button {
  height: 100px;
  width: 300px;
  font-size: 28px;
  color: white;
  background-color: tomato;
  border: none;
}
button:hover {
  background-color: wheat;
}

Tìm hiểu quá trình chuyển đổi

CSS Transition là gì?

tùy chọn chuyển tiếp

Những cách khác nhau để viết thuộc tính chuyển đổi

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề