Rate this post
Bạn đã bao giờ tự hỏi làm thế nào mà ba dấu chấm trên một trang web lại nhấp nháy nhanh như vậy? Thuộc tính CSS Transforms and Transitions có thể làm được điều này! Thuộc tính CSS Transform áp dụng chuyển động, xoay, nghiêng và chia tỷ lệ cho các phần tử HTML ở dạng 2D hoặc 3D. Thuộc tính chuyển đổi giúp thay đổi diễn ra thuận lợi và nhanh chóng.
Nếu bạn đang cố gắng làm cho dự án của mình trở nên tương tác, bạn nên biết về cặp đôi quyền lực này để giữ cho hoạt ảnh của bạn nhất quán và khó nắm bắt. Tốt nhất là tránh các vấn đề về khả năng tương thích giữa các trình duyệt có thể làm phức tạp thiết kế của bạn.
Xem thêm Global attribute trong html
Vậy, sự khác biệt giữa CSS Transform và CSS Transition là gì? Thuộc tính Transform trong CSS di chuyển hoặc sửa đổi giao diện của một phần tử, trong khi thuộc tính Transition chuyển đổi liền mạch và nhẹ nhàng phần tử từ trạng thái này sang trạng thái khác.
Xem thêm Kiểm tra lỗ hổng bảo mật CSS Injection
Trong blog này, chúng tôi sẽ đi sâu vào các thuộc tính Chuyển đổi và Chuyển đổi CSS sẽ giúp bạn trong việc tạo các hình ảnh động đơn giản và thú vị với ít dòng mã hơn.
Hãy bắt đầu với CSS Transform và Transition!
Tóm Tắt
Thuộc tính CSS Transform
Thuộc tính chuyển đổi trong CSS được gọi khi có sự thay đổi về trạng thái của phần tử HTML. Bạn có thể xoay, xiên, di chuyển và chia tỷ lệ các phần tử. Nó xảy ra khi trạng thái của một phần tử được sửa đổi, như khi bạn di chuột qua một nút hoặc thực hiện một cú nhấp chuột. Chúng ta sẽ xem cách này hoạt động như thế nào trong các phần tiếp theo của blog này.
Có ba biến thể của thuộc tính CSS Transform trong 2D.
- transform: TpropertyX(x);
- transform: TpropertyY(y);
- transform : Tproperty(x,y);
Ở đây Tproperty đề cập đến thuộc tính phần tử mà bạn muốn thay đổi, x và y có thể là giá trị âm hoặc dương. Thuộc tính CSS Transform trong 3D bao gồm trục Z. X là chiều rộng, Y là chiều cao và Z là chiều sâu của màn hình.
Xem thêm CSS là gì? cách hoạt động và cách học CSS
Translate
Thuộc tính Translate thay đổi vị trí trái / phải và lên / xuống của phần tử trên trang dựa trên các tham số trục X (ngang) và Y (dọc) đã cho. Tham số trục X dương sẽ di chuyển phần tử sang bên phải và giá trị âm sẽ di chuyển phần tử sang bên trái. Tham số trục Y dương di chuyển phần tử xuống và dương sẽ di chuyển phần tử lên trên.
<div class="container">
<h3>Hover!</h3>
<div id="box"></div>
</div>
#box
{
width: 120px;
height: 120px;
background-color: rgba(55, 255, 5, 0.582);
border-radius: 12px;
border: solid rgb(110, 235, 110) 4px;
}
#box :hover{ transform: translate(100%,60%);}
Trong ví dụ trên, hộp sẽ di chuyển từ vị trí ban đầu sang phải 100% và xuống 60% vì cả hai đều là các tham số dương.
Skew
Skew nghiêng phần tử về một hướng dựa trên các tham số được cung cấp cho các trục X và Y của nó. Tham số X dương nghiêng về bên phải và tiêu cực nghiêng về bên trái. Đồng thời, cực dương Y nghiêng nó xuống và âm dương nghiêng nó lên trên.
<div class="container">
<h3>Hover!</h3>
<div id="box"></div>
</div>
#box
{
width: 120px;
height: 120px;
background-color: rgba(246, 200, 250, 0.932);
border-radius: 12px;
border: solid rgb(246, 169, 253) 4px;
}
#box :hover{ transform: skew(30deg,30deg);
Trong ví dụ trên, hộp đã được nghiêng sang phải và hướng lên trên vì cả hai đều là các tham số dương.
Nếu bạn xiên một phần tử, nó cũng sẽ xiên tất cả các phần tử con tồn tại bên trong phần tử đó. Nếu chúng ta cần duy trì góc ban đầu của một phần tử con, chúng ta sẽ phải sử dụng giá trị đối lập của xiên để giữ nguyên giá trị ban đầu.
Xem thêm Object trong JavaScript
Scale
Quy mô có thể tăng hoặc giảm kích thước của một phần tử HTML dựa trên các tham số đã cho. Giá trị dương tăng kích thước theo hướng X hoặc Y, trong khi giá trị âm giảm kích thước theo hướng X hoặc Y.
Nói một cách đơn giản, new_size = tham số * original_size;
<div class="container">
<h3>Hover!</h3>
<div id="box"></div>
</div>
#box
{
width: 120px;
height: 120px;
background-color: rgba(172, 221, 243, 0.842);
border-radius: 12px;
border: solid rgb(172, 221, 243) 4px;
}
#box :hover{ transform: scale(0.5);}
Trong ví dụ trên, kích thước hộp đã được thu nhỏ xuống một nửa so với kích thước ban đầu.
Rotate
Thuộc tính Rotate có thể xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ dựa trên một số độ được chỉ định. Mức độ dương sẽ quay phần tử theo hướng ngược chiều kim đồng hồ và tham số âm sẽ quay phần tử theo chiều kim đồng hồ.
Trong ví dụ trên, hộp được xoay 25 độ ngược chiều kim đồng hồ vì tham số là dương.
Ngoài những điều này, chúng ta có thể kết hợp nhiều thuộc tính CSS Transform cho một phần tử. Bạn sẽ cần chỉ định các thuộc tính mà bạn muốn thay đổi.
xem thêm Content-Section element trong html
Ví dụ: biến đổi: prop1 (tham số) prop2 (tham số);
Chúng ta hãy xem một ví dụ. Tôi đã thêm thuộc tính chuyển tiếp ở đây. Chúng ta sẽ biết thêm về nó trong các phần sắp tới.
<div class="container">
<h3>Hover!</h3>
<div id="box"></div>
</div>
#box{
width: 120px;
height: 120px;
background-color: rgba(247, 169, 169, 0.788);
border-radius: 12px;
border: solid rgb(247, 169, 169) 4px;
transition: all 0.7s ease;
}
#box:hover{
transform: rotate(120deg) scale(1.5) translateY(-100px);
}
Các phép biến đổi mà không cần thêm các phép chuyển đổi xảy ra nhanh chóng trong một phần nhỏ của giây. Chúng tôi sẽ khắc phục điều này trong phần tiếp theo bằng cách thêm một số chuyển đổi cho giống nhau.
Khả năng tương thích trình duyệt của các chuyển đổi CSS
Hãy để chúng tôi xem xét khả năng tương thích của thuộc tính CSS Transform trên các trình duyệt khác nhau.
Thuộc tính Transitions CSS
Chúng tôi đã thấy các thuộc tính CSS Transform khác nhau thay đổi trạng thái của phần tử theo cách trực quan như thế nào. Bây giờ, thuộc tính Transition thêm một mức độ dần dần vào trạng thái đã thay đổi đó. Quá trình chuyển đổi sẽ trở nên suôn sẻ trong một khoảng thời gian nhất định.
Ba thuộc tính chính được yêu cầu để quá trình chuyển đổi có hiệu lực:
- transition-property
- transition-duration
- transition-timing
Bạn phải chỉ định thuộc tính của phần tử bạn muốn thay đổi và khoảng thời gian mà thay đổi đó sẽ diễn ra. Chức năng định thời và thuộc tính trễ là tùy chọn.
div {
transition: [property] [duration] [timing-function] [delay];
}
transition-property
Thuộc tính chuyển tiếp xác định thuộc tính CSS mà quá trình chuyển đổi qua phần tử sẽ được áp dụng. Chúng tôi cũng có thể áp dụng chuyển đổi cho một thuộc tính (ví dụ: màu nền hoặc chuyển đổi) hoặc cho tất cả các thuộc tính trong bộ quy tắc.
div {
transition-property: all;
transition-property: transform;
}
transition-duration
Thuộc tính thời lượng chuyển tiếp xác định khoảng thời gian của quá trình chuyển đổi qua phần tử. Chúng tôi có thể chỉ định bằng giây hoặc mili giây.
div { transition-duration: 4s; }
<div class="wrap">
<div class="container">
<h1>300ms</p>
<div class="box1 box"></div>
</div>
<div class="container">
<h1>1s</p>
<div class="box2 box"></div>
</div>
<div class="container">
<h1>3s</p>
<div class="box3 box"></div>
</div>
</div>
.wrap {
margin: 50px;
}
.container {
display: inline-block;
width: 150px;
}
h1 {
color: lightgray;
font-family: lato;
font-size: 20px;
font-weight: 200;
padding: 20px;
text-align: center;
}
.box {
border-radius: 50%;
height: 40px;
margin: 50px auto;
width: 40px;
.wrap:hover & {
transform: scale(2);
}
}
.box1 {
background: #60D4C8;
transition: all 300ms;
}
.box2 {
background: #46BAAF;
transition: all 1s;
}
.box3 {
background: #3EA69B;
transition: all 3s;
}
Hãy xem xét ví dụ về Chuyển đổi quy mô với thuộc tính Chuyển đổi được thêm vào.
.square {
background: darkturquoise;
border-radius: 5px;
height: 100px;
margin: 100px;
transition: transform 1s;
width: 100px;
&:hover {
transform: scale(2);
}
}
transition-timing
Thuộc tính chức năng thời gian chuyển tiếp chỉ định tốc độ của quá trình chuyển đổi trong suốt thời lượng của phần tử. Thời gian mặc định rất dễ dàng, bắt đầu từ từ, tăng tốc ngay lập tức, sau đó giảm dần ở cuối.
Các tùy chọn thời gian khác bao gồm dễ dàng, dễ dàng vào, dễ dàng ra, dễ dàng vào và tuyến tính.
Dưới đây là ví dụ về các tùy chọn thời gian khác nhau (được sử dụng với thuộc tính biến đổi).
<div class="container"> <div class="circle0"></div> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div>
.container {
margin: 100px;
}
.circle {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
.container:hover & {
transform: translateX(200px);
}
}
.circle0 {
@extend .circle;
background: PaleTurquoise;
transition: all 1.5s linear;
}
.circle1 {
@extend .circle;
background: salmon;
transition: all 1.5s ease;
}
.circle2 {
@extend .circle;
background: lightskyblue;
transition: all 1.5s ease-in;
}
.circle3 {
@extend .circle;
background: khaki;
transition: all 1.5s ease-out;
}
.circle4 {
@extend .circle;
background: mediumturquoise;
transition: all 1.5s ease-in-out;
}
.circle5 {
@extend .circle;
background: thistle;
transition: all 1.5s cubic-bezier(0,1,.98,0);
}
Như chúng ta có thể thấy, hộp giảm dần tỷ lệ dưới một giây.
Bạn có thể chỉ định một loại chuyển đổi duy nhất cho tất cả thuộc tính như được hiển thị trong ví dụ hoặc bạn có thể chỉ định các chuyển đổi khác nhau cho từng thuộc tính như sau:
transition: p1 d1, p2 d2,…, pn dn;
Trong đó pn chỉ định tên thuộc tính và dn chỉ định thời lượng.
Bây giờ, hãy xem cách chúng tôi có thể thử và làm cho quá trình chuyển đổi hoạt động trên tất cả các trình duyệt. Chúng tôi sẽ sử dụng tiền tố của nhà cung cấp cho cùng một.
Hãy xem xét ví dụ trên, đây là cách nó trông như thế nào đối với các tiền tố của nhà cung cấp:
Đây -webkit cho Chrome, Safari; -moz cho Firefox, -o cho Opera.
#box
{
width: 120px;
height: 120px;
background-color: rgb(140, 212, 245);
-webkit-transition: all 1s;
-moz-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s;
}
#box :hover{ transform: scale(0.5);}
Việc chỉ định tiền tố của nhà cung cấp đảm bảo rằng quá trình chuyển đổi hoạt động tức thì trên các trình duyệt thường được đối tượng mục tiêu sử dụng.
Khả năng tương thích với trình duyệt của thuộc tính CSS Transition
Hãy xem xét khả năng tương thích của CSS Transition trên các trình duyệt.
Việc kiểm tra tính tương thích giữa các trình duyệt của trang web của bạn thay vì lưu trữ nó trên mỗi trình duyệt web có thể rất phức tạp. Không thể tải xuống và cài đặt một loạt trình duyệt và phiên bản trình duyệt cho thiết bị mục tiêu hoặc hệ điều hành.
Xem thêm Selenium IDE- xác định phần tử html cho testing website
