Gần đây, tôi bắt gặp một nguyên mẫu hoạt hình ở trạng thái di chuột qua nút và muốn xem liệu tôi có thể xây dựng nó chỉ bằng CSS hay không. Nói một cách dễ hiểu, khi bạn di chuột qua nút hình viên thuốc, nền sẽ thay đổi từ nền trắng trơn thành một dải màu đẹp mắt và có hiệu ứng quét ánh sáng trên nút
Tôi có một cách tiếp cận tiêu chuẩn để xây dựng bất kỳ thiết kế nào bằng CSS và đó là chia nhỏ mọi thứ thành các phần nhỏ hơn. Đầu tiên, có nút khi không có ai tương tác với nó. Sau đó, có sự chuyển đổi độ dốc đó, và điểm khởi sắc cuối cùng là hiệu ứng quét ánh sáng
Hình viên thuốc
Đối với hình viên thuốc, chúng tôi sử dụng thuộc tính border-radius
đáng tin cậy. Bản thân giá trị này đại diện cho bán kính của hình tròn ở góc hộp, điều này ảnh hưởng đến độ lớn của góc tròn. Đây là lý do tại sao khi chúng tôi đặt giá trị border-radius
là 50% trên hộp hình vuông, chúng tôi có thể nhận được hình tròn hoàn hảo
Dù sao, đối với hình viên thuốc, đặt border-radius
thành một nửa chiều cao của phần tử sẽ thực hiện thủ thuật
CSS của tôi trông như thế này bây giờ
button {
padding: 0.75em 1.5em;
background-color: white;
border: 2px solid;
font-size: larger;
border-radius: 1.65em;
cursor: pointer;
}
Chuyển đổi độ dốc nền
Thật không may, thuộc tính
button {
padding: 0.75em 1.5em;
background-color: white;
border: 2px solid;
font-size: larger;
border-radius: 1.65em;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
1 không thể hoạt ảnh được. Nếu bạn kiểm tra phần về button {
padding: 0.75em 1.5em;
background-color: white;
border: 2px solid;
font-size: larger;
border-radius: 1.65em;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
1 trong Mô-đun Nền và Đường viền CSS Cấp độ 3, bạn sẽ thấy rằng loại hoạt ảnh là rời rạcĐiều này có nghĩa là hoạt ảnh sẽ tiếp tục từ một khung hình chính này sang khung hình chính tiếp theo mà không có bất kỳ phép nội suy nào, điều này cần thiết để chuyển đổi suôn sẻ giữa các trạng thái
Tuy nhiên, có một cách giải quyết cho vấn đề này, đó là sử dụng các phần tử giả. Đặt độ dốc trên phần tử giả của nút, sau đó tạo hiệu ứng động về độ mờ của phần tử giả đó để chuyển nền thành nền chuyển màu
button {
padding: 0.75em 1.5em;
background-color: white;
border: 2px solid;
font-size: larger;
border-radius: 1.65em;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
Tôi đã thêm
button {
padding: 0.75em 1.5em;
background-color: white;
border: 2px solid;
font-size: larger;
border-radius: 1.65em;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
0 vào nút để đảm bảo rằng phần tử giả của tôi được định vị bên trong nút. button {
padding: 0.75em 1.5em;
background-color: white;
border: 2px solid;
font-size: larger;
border-radius: 1.65em;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
1 là để đảm bảo rằng các góc của phần tử giả không ló ra khỏi các góc tròn và button {
padding: 0.75em 1.5em;
background-color: white;
border: 2px solid;
font-size: larger;
border-radius: 1.65em;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
2 đảm bảo rằng phần tử giả nằm bên dưới nội dung của nútĐối với phần tử giả, CSS của tôi trông như thế này
button::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient[to left, tomato 0%, salmon 25%, peachpuff 100%];
z-index: -1;
transition: opacity 240ms linear;
opacity: 0;
}
button:hover::before {
opacity: 1;
}
Hiệu ứng quét ánh sáng
Đối với hiệu ứng quét ánh sáng, tôi cũng cần phần tử giả khác. Tùy thuộc vào cách quét ánh sáng được thiết kế, CSS cho điều này có thể rất khác nhau. Tôi không phải là người sáng tạo lắm, vì vậy tôi sẽ chỉ sử dụng một đường thẳng đứng mỏng màu trắng với các cạnh mờ để trông giống như ánh sáng
button::after {
content: '';
height: 150%;
width: 0.25em;
background-color: #fff;
box-shadow: 0px 0px 8px 4px #fff;
transform: translateX[-1em];
}
Và đối với hoạt ảnh, tôi chỉ muốn đường ánh sáng của mình quét ngang từ trái sang phải khi ai đó di chuột qua nút
button:hover::after {
animation-duration: 300ms;
animation-name: sweep;
}
@keyframes sweep {
from {
transform: translateX[-1em]
}
to {
transform: translateX[12.5em];
animation-timing-function: ease-out;
}
}
Đây là lý do tại sao sẽ rất tốt nếu bạn làm việc với một nhà thiết kế chuyển động hoặc ai đó quen thuộc với việc định thời gian cho hoạt ảnh để điều chỉnh mọi thứ cho đến khi nó trông ổn. Tùy thuộc vào thiết kế, bạn thậm chí có thể sử dụng SVG làm hình nền cho hình quét thay vì đường thẳng đứng. Rất nhiều tùy chọn có sẵn
Nếu bạn muốn xem mã đầy đủ đang hoạt động, đây là Codepen
Xem nút Pen Bling ✨ của Chen Hui Jing [@huijing] trên CodePen
kết thúc
Cá nhân tôi thấy việc tạo hoạt ảnh bằng CSS thực sự rất thú vị. Và mặc dù bạn có thể không thực hiện được các hoạt ảnh đường nét thực sự phức tạp chỉ với CSS một mình, tôi thấy rằng có một số thuộc tính hoạt hình mà hầu hết mọi người hiếm khi sử dụng
Bản thân tôi chỉ mới khám phá ra chúng một vài năm trước đây khi tôi cố gắng tạo hoạt ảnh cho Buổi nói chuyện không chính thức. Linh vật CSS, Kittencorn. Tôi đã viết cái đó trong Tìm hiểu các thuộc tính hoạt hình CSS với một con mèo con ma thuật
Nhưng thực sự có rất nhiều thứ có thể làm được. Tôi đặc biệt khuyến khích mọi người chơi xung quanh với các thuộc tính hoạt hình CSS nhiều hơn. Nếu có điều gì đó bạn muốn làm nhưng không thể thực hiện được, bạn cũng có thể tham gia thảo luận trong kho CSSWG Github. Có rất nhiều vấn đề được gắn thẻ với web-animations-1 và web-animations-2