Nút trái sang phải hình ảnh động css

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