Chuyển tiếp CSS cho phép bạn thay đổi giá trị thuộc tính một cách trơn tru, trong một thời lượng nhất định Show
Nội dung chính Hiển thị
CSS transition được sử dụng rộng rãi trong thiết kế website nhằm tạo ra những hiệu ứng hấp dẫn, thu hút người xem và giúp website trở nên ấn tượng hơn. Vì vậy quá trình chuyển đổi là gì? lục mục
Chuyển đổi là gì?Chuyển đổi là thuật ngữ chỉ chuyển động, chuyển đổi. Trong thiết kế web kế tiếp, quá trình chuyển đổi là việc chuyển đổi từ trạng thái này sang trạng thái khác một cách mượt mà hơn Chuyển đổi được sử dụng phổ biến trong việc thiết kế trang web hiệu ứng hấp dẫn như dịch chuyển, xoay, thu, phóng,… Giúp tạo nên ấn tượng đẹp mắt cho người nhìn Chức năng của nhóm thuộc tính chuyển tiếpChức năng chủ yếu của nhóm thuộc tính chuyển đổi Được sử dụng để thiết lập các hiệu ứng luôn chuyển đổi giá trị cho một thuộc tính bất kỳ của một phần từ đó. Tức là chuyển đổi phần tử từ trạng thái này sang trạng thái khác  Ví dụ. Một phần tử ở bên dưới có kích thước chiều rộng mặc định là 500px, khi bạn di chuyển con trỏ đến hình ảnh đó thì hình ảnh đó có thể đột ngột phóng to kích thước lên 800px hoặc 1000px Nhưng việc sử dụng nhóm chuyển đổi CSS có thể giúp thiết lập các hiệu ứng chuyển đổi giá trị cho thuộc tính chiều rộng của phần tử giúp tăng chiều rộng một cách từ từ, người dùng sẽ cảm thấy sự mượt mà, thú vị và bắt mắt hơn Các thuộc tính chuyển tiếpDưới đây là các thuộc tính chuyển đổi cơ bản được sử dụng nhiều nhất trong CSS mà bạn có thể tham khảo Thuộc tính chuyển tiếpLà cú pháp tổng hợp được sử dụng để thiết lập các hiệu ứng luân chuyển giá trị cho các thuộc tính của phân tử. Thay vì hợp nhất các thuộc tính chuyển tiếp riêng lẻ, bạn có thể sử dụng một thuộc tính chuyển đổi là đủ cú pháp. quá trình chuyển đổi - thời gian thời lượng thuộc tính - độ trễ chức năng. Trong đó, thuộc tính, thời lượng, thời gian – chức năng, độ trễ lần cuối cùng là giá trị của 4 thuộc tính
Mặc dù vậy, thuộc tính chuyển đổi không bắt buộc phải gán đủ 4 giá trị trên. Những giá trị thuộc tính nào còn thiếu thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính đó Thuộc tính chuyển tiếp – tài sảnThuộc tính <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>0 được sử dụng để xác định thuộc tính mà bạn muốn tạo hiệu ứng chuyển đổi luân phiên giá trị cho nó khi phân tử đó thay đổi trạng tháicú pháp. <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>1. Trong đó, giá trị có thể được xác định dựa trên một trong 5 giá trị sau
Lưu ý. Nếu bạn muốn tạo hiệu ứng luân chuyển giá trị cho nhiều thuộc tính (nhưng không phải là tất cả) thì khi thiết lập giá trị cho thuộc tính này, bạn cần phải khai báo đầy đủ tên của các thuộc tính bạn muốn tạo hiệu . Và đừng quên thêm một dấu “,” ngăn cách giữa các thuộc tính Thuộc tính chuyển tiếp – thời lượngThuộc tính dùng để thiết lập “thời thượng” của hiệu ứng luân chuyển giá trị. Trợ giúp xác định thời gian được bao nhiêu giây – s hay mili giây – s mà hiệu ứng chuyển đổi cần thiết để hoàn thành cú pháp. <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>00. in which. <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>01 được xác định với 3 giá trị thuộc tính sau
Thuộc tính transition – delayThuộc tính <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>05 được sử dụng để xác định khoảng thời gian mà hiệu ứng chuyển đổi cần phải bắt đầu, với giá trị được tính bằng giây (s) hoặc mili giây (ms). Value value bằng 0cú pháp. <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>00. in which
Thuộc tính transition – timing – functionLà một thuộc tính sử dụng khi một hiệu ứng luân chuyển giá trị diễn ra, mặc định hiệu ứng sẽ chuyển động chậm ở giai đoạn đầu, tăng dần ở giai đoạn giữa và chậm lại ở giai đoạn cuối Tính năng sử dụng thuộc tính <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>00 có thể giúp thiết lập lại tốc độ chuyển động của hiệu ứng trong từng giai đoạncú pháp. giá trị. Trong đó, giá trị được xác định dựa trên 7 loại giá trị sau
Nếu nhìn qua, các thuộc tính của <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>00 và <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>01 tương đối giống nhau, vì đều tạo ra những hiệu ứng chuyển động cho phần tử. Tuy nhiên, hiệu ứng chuyển động thuộc nhóm <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>00 sẽ chỉ xảy ra khi phần tử bị thay đổi trạng thái do tác động của người dùng. Còn hiệu ứng chuyển động của nhóm thuộc tính <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>01 thì được thiết kế theo khuôn khổ sẵn có, chuyển động bất kỳ lúc nào mà không phụ thuộc vào tác động của người dùngCách sử dụng Transition trong CSSBạn có thể sử dụng các loại thuộc tính chuyển đổi để biến đổi hiển thị phần từ như dịch chuyển, thu phóng, xoay,… Hiệu ứng chuyển đổi cũng có thể sử dụng cho nhiều thuộc tính của CSS như nền – màu sắc, chiều cao, Create a convert, convertVí dụ. Tạo hộp hiệu ứng thay đổi chiều rộng khi di chuột vào phần tử, hiệu ứng trong 3 giây <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>4
Rotate section – XoayVí dụ. Tạo hiệu ứng xoay với xoay. Roo phần tử đi khoảng 45 độ <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>
Lưu ý. Mặc dù phần gốc quay phần tử nằm ở giữa phần tử, được thiết lập bằng thuộc tính chuyển tiếp – gốc. Mặc định thì biến đổi – gốc sẽ là 50% 50 % chính là giữa các phần tử Nếu góc quay thay thế là ở góc biến đổi thứ nhất – gốc sẽ là 0% 0% hoặc biến đổi – gốc. trên cùng bên trái Tạo hiệu ứng đối với skew ()<style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>0Lưu ý. Nghiên cứu phần tử skew sẽ sử dụng phương thức skew (x – angle, y – angle)
Create a effect shift section translate()<style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>0Lưu ý. Phương thức sử dụng translate (x,y) để thay đổi vị trí phần tử thêm một đoạn x, y nào đó
Tạo hiệu ứng chuyển động thu phóng phần tử tỷ lệ ()<style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>0Lưu ý. Phần tử zoom sẽ sử dụng phương thức scale (x – scale, y – scale) Xem Bút hướng dẫn chia cột với float của Phan Đỗ Hoàng Nhật(@hoangnhata2) trên CodePen. Tạo hiệu ứng kết hợpVí dụ. Kết hợp hiệu ứng xoay và chuyển đổi đồng thời <style>
div.quayphantu {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(45deg);
}
</style>
<div class="quayphantu">
rotate(45deg)
</div>9
Tổng kếtTrên đây là một số gợi ý về cách tạo chuyển động với quá trình chuyển đổi trong CSS cơ bản mà Onlycssmenu đã tổng hợp và chia sẽ. Để ứng dụng thấm nhuần và thuận lợi trong thực tiễn, bạn cần tìm hiểu và luyện tập nhiều lần để ghi nhớ từng hiệu ứng và cách làm nhé. Chúc bạn thành công |
