programming css

Cuộn hoạt hình css

Hàm CSS scroll[] có thể được sử dụng với animation-timeline để chỉ ra phần tử tổ tiên và trục thanh cuộn sẽ cung cấp dòng thời gian cuộn ẩn danh để tạo hoạt ảnh cho phần tử hiện tại

Hàm được sử dụng để chỉ định xem phần tử cung cấp dòng thời gian cuộn là phần tử gốc hay phần tử tổ tiên gần nhất có bất kỳ thanh cuộn nào. Nó cũng đặt trục cuộn nào cung cấp dòng thời gian cuộn

Lưu ý rằng nếu trục được chỉ định không chứa thanh cuộn thì dòng thời gian hoạt ảnh sẽ không hoạt động [không có tiến trình]

animation-timeline: scroll[];

/* values for both axis and scroller element */
animation-timeline: scroll[block nearest];  /* Default */
animation-timeline: scroll[inline nearest];
animation-timeline: scroll[vertical nearest];
animation-timeline: scroll[horizontal nearest];
animation-timeline: scroll[block root]; 
animation-timeline: scroll[inline root];
animation-timeline: scroll[vertical root];
animation-timeline: scroll[horizontal root];

/* values for either axis or scroller element */
animation-timeline: scroll[nearest];
animation-timeline: scroll[root];
animation-timeline: scroll[inline];
animation-timeline: scroll[vertical];
animation-timeline: scroll[vertical];
animation-timeline: scroll[horizontal];

Các giá trị được phép để biểu thị phần tử sẽ cung cấp dòng thời gian cuộn

nearest

[Mặc định] Cha đầu tiên của phần tử này có thanh cuộn ở một trong hai trục

root

phần tử gốc

Các giá trị được phép cho trục thanh cuộn là

block

[Mặc định] Thanh cuộn trong trục khối của hộp chứa cuộn. Trục khối là hướng vuông góc với dòng văn bản trong một dòng. Đối với chế độ viết ngang, chẳng hạn như tiếng Anh tiêu chuẩn, điều này giống như

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

0, trong khi đối với chế độ viết dọc, nó giống như

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

Thanh cuộn trong trục nội tuyến của vùng chứa cuộn. Trục nội tuyến là hướng song song với dòng văn bản trong một dòng. Đối với chế độ viết ngang, trục này giống với trục

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

1, trong khi đối với chế độ viết dọc, trục này giống với trục

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

Thanh cuộn trong trục dọc của hộp chứa cuộn

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

Thanh cuộn trong trục ngang của hộp chứa cuộn

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

Phần tử

 = 
  scroll[ [  ||  ]? ]  

 = 
  root     |
  nearest  

 = 
  block       |
  inline      |
  vertical    |
  horizontal

7 được tạo hoạt ảnh bằng cách sử dụng dòng thời gian của thanh cuộn ẩn danh, được áp dụng cho phần tử được tạo hoạt ảnh bằng cách sử dụng ký hiệu chức năng scroll[]. Dòng thời gian trong ví dụ cụ thể này được cung cấp bởi phần tử cha gần nhất có [bất kỳ] thanh cuộn nào, từ thanh cuộn theo hướng khối

HTML

HTML cho ví dụ được hiển thị bên dưới

CSS

CSS bên dưới xác định một hình vuông xoay theo các hướng khác nhau theo dòng thời gian được cung cấp bởi thuộc tính animation-timeline. Trong trường hợp này, dòng thời gian được cung cấp bởi

0, có nghĩa là nó sẽ chọn thanh cuộn theo hướng khối của phần tử tổ tiên gần nhất có thanh cuộn;

Lưu ý rằng các tùy chọn

1 bên dưới thực sự là mặc định, vì vậy chúng tôi có thể thay vào đó chỉ cần có. scroll[]

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: scroll[block nearest];
}

@keyframes rotateAnimation {
  from {
    transform: rotate[0deg];
  }
  to {
    transform: rotate[360deg];
  }
}

CSS cho vùng chứa đặt chiều cao của nó thành 300px và chúng tôi cũng đặt vùng chứa để tạo thanh cuộn dọc nếu nó tràn. CSS "cáng" đặt chiều cao khối thành 600px, điều này buộc phần tử vùng chứa tràn ra ngoài. Cả hai cùng nhau đảm bảo rằng vùng chứa có thanh cuộn dọc, cho phép nó được sử dụng làm nguồn của dòng thời gian thanh cuộn ẩn danh

HTML

CSS

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề