Bạn có thể làm động bằng css không?
Hoạt ảnh CSS-WD Show
Phương pháp phức tạp để làm động các thuộc tính nhất định của một phần tử Trình duyệt Chrome
Bờ rìa
Cuộc đi săn
firefox
Ô-pê-ra
I E
Chrome dành cho Android
Safari trên iOS
Internet Samsung
Opera Mini
Opera di động
Trình duyệt UC cho Android
Trình duyệt Android
Firefox dành cho Android
Trình duyệt QQ
Trình duyệt Baidu
Trình duyệt KaiOS
Tất cả các ví dụ trên trang này giờ đây sẽ hoạt động trong Firefox, Safari, Chrome, Opera và Internet Explorer 10+. Trong các trình duyệt cũ hơn, bạn sẽ không thấy hiệu ứng nào hoặc quá trình biến đổi diễn ra mà không có bất kỳ hoạt ảnh nào. Tiền tố dành riêng cho trình duyệt không còn cần thiết Các hoạt ảnh được trình bày bên dưới liên quan đến việc thiết lập một chuyển đổi diễn ra để phản hồi lại di chuột qua hoặc sự kiện khác. Sau đó, thay vì áp dụng hiệu ứng ngay lập tức, chúng tôi chỉ định một chức năng thời gian chuyển đổi khiến quá trình chuyển đổi diễn ra tăng dần trong một khoảng thời gian đã đặt Ngoài ra còn có các loại hoạt hình khác, bao gồm @keyframes cho chuyển động vĩnh viễn và requestAnimationFrame cho phép kiểm soát hoàn toàn thời gian và đường dẫn. Chúng được đề cập trong các bài viết riêng biệt hỗ trợ trình duyệtMột số trình duyệt đã giới thiệu hỗ trợ cho các biến đổi trước khi thông số kỹ thuật được hoàn thiện, sử dụng một loạt các tiền tố dành riêng cho trình duyệt. Đối với Safari, Firefox, Opera và Internet Explorer, các tiền tố bắt buộc là -webkit-, -moz-, -o- và -ms- Internet Explorer 10 trở lên hỗ trợ chuyển đổi không có tiền tố. Trong Bản xem trước IE10, cần có tiền tố -ms- để chuyển đổi. Chuyển đổi trong tất cả các phiên bản IE10 vẫn yêu cầu tiền tố Để hỗ trợ các trình duyệt cũ này, nên sử dụng các kiểu sau để chuyển tiếp
và cho biến đổi
Vì tất cả các trình duyệt hiện đại hiện hỗ trợ biến đổi và chuyển đổi bằng cách sử dụng cú pháp không có tiền tố chính thức, chúng tôi đã xóa tiền tố khỏi hầu hết các mã mẫu bên dưới, nhưng vẫn sử dụng chúng trong nền Giới thiệu chuyển đổi CSSTác dụng của CSS Transform là sửa đổi giao diện của một phần tử trong trình duyệt bằng cách dịch, xoay hoặc các phương tiện khác. Khi được xác định trong biểu định kiểu, các phép biến đổi được áp dụng khi trang được hiển thị, vì vậy bạn thực sự không thấy bất kỳ hoạt ảnh nào đang diễn ra. Biến đổi cũng có thể được áp dụng như một. hiệu ứng di chuột mà bạn có thể thấy trong phần tiếp theo Đề xuất của Apple về Chuyển đổi CSS yêu cầu khả năng thay đổi phối cảnh và hoạt động theo ba chiều, nhưng điều đó vẫn còn xa. Ngay cả các tính năng được trình bày ở đây cũng sẽ không xuất hiện trong các trình duyệt khác cho đến khi chúng được cơ quan tiêu chuẩn chấp thuận, những người vẫn đang ngụy biện về các mô-đun CSS3 Dưới đây, chúng tôi đã đặt bốn DIV giống hệt nhau được tạo kiểu dưới dạng hộp 100 x 60 pixel với đường viền 2 pixel. Sau đó, mỗi phần tử đã được biến đổi theo một cách nào đó bằng cách sử dụng thuộc tính biến đổi ô 1Dịch sang phải. biến đổi. translate(3em,0);box 2Xoay 30 độ theo chiều kim đồng hồ. biến đổi. rotate(30deg);box 3Dịch sang trái và xuống dưới. biến đổi. translate(-3em, 1em);box 4Được phóng to gấp đôi kích thước ban đầu. biến đổi. tỷ lệ (2);Mã HTML và CSS cho ví dụ này như sau Nếu không có bản dịch và đường viền màu đỏ trên hộp thứ hai, bạn sẽ chỉ thấy bốn hộp giống hệt nhau được dán nhãn từ một đến bốn. Tuy nhiên, những gì bạn thấy trong các trình duyệt được hỗ trợ (Safari, Chrome, Firefox, Opera) sẽ giống như thế này hơn  Đáng chú ý là văn bản vẫn có thể được chọn trong các phần tử được chuyển đổi, ngay cả khi được xoay và việc chia tỷ lệ phần tử ảnh hưởng đến các thuộc tính bao gồm độ rộng đường viền và kích thước phông chữ chứ không chỉ kích thước hộp Tạo hiệu ứng chuyển đổi của bạnMặc dù bản thân CSS Transformation là một công cụ mạnh mẽ dành cho các nhà phát triển (mặc dù tôi rùng mình khi nghĩ điều gì sẽ xảy ra khi nó được sử dụng rộng rãi hơn), khả năng tạo hoạt ảnh cho các hiệu ứng tương tự bằng cách sử dụng quá trình chuyển đổi thú vị hơn nhiều. Di chuột qua bốn ô sau đây để minh họa Những gì bạn thấy ở trên là bốn hộp từ phần trước ở trạng thái mặc định của chúng. Tuy nhiên, khi bạn di chuột qua bất kỳ hộp nào, chuyển đổi CSS được áp dụng dưới dạng hoạt ảnh một giây. Khi chuột di chuyển, hoạt ảnh đảo ngược, đưa từng hộp trở lại trạng thái ban đầu Và chúng tôi có thể làm điều này mà không cần sử dụng JavaScript - chỉ HTML và CSS. Đây là mã hoàn chỉnh cho 'hộp 1' trượt sang phải và quay lại Nếu bạn nghĩ điều đó thật tuyệt, hãy nhận ra rằng Hoạt hình CSS không chỉ được áp dụng cho các phép biến đổi mà còn cho các thuộc tính CSS khác bao gồm. độ mờ đục, màu sắc và một loạt những thứ khác Trong ví dụ tiếp theo, hộp bên trái bắt đầu nhỏ và có màu xanh lục với các góc vuông, trong khi hộp bên phải lớn hơn, có viền đỏ và các góc tròn. Di chuột qua một trong hai hộp sẽ kích hoạt hoạt ảnh làm cho hộp 1 trông giống hộp 2 và ngược lại Một lần nữa, chúng tôi vẫn chỉ sử dụng HTML và CSS để thực hiện điều này. Nếu không có CSS Transforms, hai hộp sẽ vẫn thay đổi màu đường viền và có thể cả bán kính đường viền, nhưng nó xảy ra ngay lập tức chứ không phải dưới dạng hoạt ảnh một giây Để biết thêm các ví dụ nâng cao, bạn có thể đọc bài viết mới của chúng tôi về cách sử dụng JavaScript để kích hoạt hoạt ảnh. Và để thay thế cho các chuyển đổi CSS và kiểm soát tốt hơn các đường dẫn và thời gian của hoạt ảnh, bạn có thể sử dụng Window. yêu cầuAnimationFrame Nhiều phép biến đổi trên một phần tửĐể áp dụng nhiều phép biến đổi cho một phần tử, chỉ cần liệt kê chúng lần lượt từng phần tử được phân tách bằng dấu cách. Ví dụ, menu con ở trên cùng bên phải của trang này có các kiểu sau Điều này có nghĩa là khi bạn di chuột qua menu phụ, nó sẽ đổi màu, xoay và tăng gấp đôi kích thước trong khoảng thời gian một giây như minh họa ở đây Các hiệu ứng này hiện đã có trong bản phát hành công khai mới nhất của Safari, vì vậy về nguyên tắc, tất cả người dùng OSX sẽ có thể thấy các hiệu ứng này. Việc thêm chúng vào trang web của bạn có phải là một ý kiến hay hay không, tôi sẽ tùy thuộc vào bạn. Hoạt hình trong hành độngBây giờ đây là một ví dụ khác về sự thú vị mà chúng ta có thể có khi kết hợp các hiệu ứng khác nhau vào một hoạt ảnh duy nhất. Có lẽ bạn đã có thể tìm ra điều gì sẽ xảy ra dựa trên CSS? và HTML Đặt chúng lại với nhau và đây là những gì bạn nhận được Nếu đang sử dụng Safari 3, bạn có thể nhận thấy một số vấn đề với hoạt ảnh, đặc biệt là khi hoạt ảnh đảo ngược sau khi bạn di chuột ra xa, nhưng trong phiên bản WebKit mới nhất, hoạt ảnh đã mượt mà hơn nhiều. Ngoài ra, hoạt ảnh trong Opera hơi thất thường, không phải tất cả các yếu tố đều hoạt ảnh Đường viền chấm xuất hiện trong hoạt ảnh hiển thị vị trí của DIV chứa hình ảnh tên lửa. DIV này dịch trên màn hình trong khi hình ảnh bên trong được xoay. Giản dị Đối với trình duyệt yếu, điều đang xảy ra là khi bạn di chuyển chuột trên nền không gian, tên lửa sẽ dịch từ dưới cùng bên trái lên trên cùng bên phải trong khoảng thời gian 3 giây (dịch()) và cũng quay 70 độ theo chiều kim đồng hồ . Hiệu quả là thô sơ, nhưng cho thấy tiềm năng Để có nhiều quyền kiểm soát hơn đối với đường dẫn và thời gian của hoạt ảnh, bạn có thể thiết lập Khung hình chính WebKit. Chúng cũng cho phép hoạt ảnh chạy tự động và liên tục thay vì chỉ phản ứng với các sự kiện của chuột Nhiều chức năng hẹn giờTrong ví dụ này, chúng tôi đang áp dụng bốn chuyển đổi khác nhau bằng cách sử dụng bốn chức năng thời gian khác nhau Khi bạn. di chuột qua khu vực bên phải hộp màu xanh sẽ quay, đổi màu từ đỏ sang xanh và di chuyển từ trên cùng bên trái của hộp chứa xuống dưới cùng bên phải trong hơn hai giây Điều đầu tiên bạn sẽ nhận thấy là chuyển động của hộp có vẻ cong hơn là thẳng. Đó là bởi vì chúng tôi đã sử dụng chức năng định thời gian nới lỏng cho dịch ngang và dễ dàng vào theo chiều dọc Để tạo hoạt ảnh trên một đường cong thực tế hoặc thậm chí là một đường dẫn tùy ý, bạn sẽ cần sử dụng JavaScript để điều khiển hoạt ảnh Trong quá trình hoạt hình, sự thay đổi màu sắc từ xanh lam sang đỏ diễn ra trong giây đầu tiên của quá trình chuyển đổi hai giây, tiếp theo là chuyển động quay diễn ra trong giây thứ hai Mẹo để làm điều này là thay vì xác định quá trình chuyển đổi dưới dạng một thuộc tính duy nhất, bạn có thể chia nó thành các phần thành phần. Chúng tôi cũng đã sử dụng độ trễ chuyển đổi cho phép bạn đặt điểm bắt đầu của các hiệu ứng khác nhau Dưới đây là các câu lệnh CSS có liên quan Các quy tắc ảnh hưởng đến quá trình chuyển đổi màu nền đã được tô sáng. Chúng diễn ra trong giây đầu tiên (độ trễ 0 giây, thời lượng 1 giây). Biến đổi xoay diễn ra trong giây tiếp theo (độ trễ 1s, thời lượng 1s) Không giống như các trình duyệt khác, Firefox yêu cầu các đơn vị được chỉ định ngay cả đối với các giá trị bằng 0 trong độ trễ chuyển tiếp, do đó, 0, 0, 0, 1 sẽ hoạt động cho ví dụ trên. Để thực hành tốt nhất, bạn nên bao gồm giây cho tất cả các giá trị thời gian CSS Di chuột qua một phần tử để tác động đến phần tử khácMột số người đã hỏi về việc kích hoạt hoạt ảnh liên quan đến sự kiện nhấp hoặc di chuột ở nơi khác trên trang. Với JavaScript, điều này có thể được thực hiện bằng cách sử dụng trình xử lý sự kiện để đặt hoặc thay đổi tên lớp của phần tử thành hoạt ảnh và để chuyển đổi hoặc khung hình chính được liên kết với lớp mới Sử dụng CSS, có một số tùy chọn để nhắm mục tiêu các yếu tố liên quan. Chúng liên quan đến các bộ chọn, chẳng hạn như các tổ hợp > (con), + (anh chị em liền kề) và ~ (anh chị em chung) Tất cả các ví dụ trước đều yêu cầu một sự kiện di chuột trực tiếp trên chính phần tử đó hoặc trên vùng chứa của nó, trong ví dụ này, hộp màu xanh chỉ hoạt hình khi bạn di chuột qua phần tử bên cạnh, hộp màu đỏ Mã CSS có liên quan như sau. Lưu ý rằng chúng tôi đang sử dụng bộ kết hợp + anh chị em liền kề để nhắm mục tiêu #box2 khi #box1 trải qua sự kiện di chuột. Bộ kết hợp ~ có thể linh hoạt hơn trong việc cho phép bạn nhắm mục tiêu các phần tử cách xa phần tử kích hoạt hơn (một số ví dụ) Internet Explorer 11 không cố gắng hoạt hình khi các giá trị đã được gán bằng cách sử dụng calc(). Thay vào đó, bạn sẽ cần sử dụng một giá trị cố định nếu muốn hỗ trợ MSIE 11. Cũng không thể tạo hoạt ảnh từ bên trái. 0 sang phải. 0 Tất nhiên chúng ta vẫn có thể tạo hiệu ứng động cho hộp đầu tiên cùng lúc với việc nhắm mục tiêu anh chị em hoặc anh chị em của nó Chỉ cần đảm bảo không di chuyển phần tử được di chuột ra khỏi bên dưới con trỏ, nếu không hoạt ảnh sẽ dừng/đảo ngược Các ví dụ này ít nhiều hoạt động như dự định trong các trình duyệt WebKit (Safari, Chrome), Firefox và Opera. Chúng cũng hoạt động trong Internet Explorer 10 Kiểm soát hoạt hình đảo ngượcTrong tất cả các ví dụ trên, bạn có thể nhận thấy một số hiệu ứng lạ khi hoạt ảnh bị đảo ngược - đặc biệt là khi chuột di chuyển ra khỏi khu vực kích hoạt trước khi hoạt ảnh hoàn thành Hộp trong hình ảnh động bên dưới sẽ tăng dần lên và sau đó lao sang bên phải bằng cách sử dụng chức năng định thời gian cực lớn, làm cho hộp bắt đầu nhanh và sau đó chậm lại ở cuối CSS cho ví dụ trên như sau Lưu ý rằng khi bạn di chuột ra xa, hộp sẽ không theo dõi lại trên cùng một đường dẫn. Thay vào đó, hoạt hình dọc sẽ xuất hiện trước, sau đó là dấu gạch ngang. Để có giải pháp cho vấn đề này, hãy tiếp tục đọc phần bên dưới Như đã đề cập ở trên, có thể điều khiển hoạt ảnh theo cả hai hướng. Trong trường hợp này, hoạt ảnh thực hiện mọi thứ ngược lại Bí quyết là chuyển đến cài đặt chuyển tiếp ban đầu sang. câu lệnh di chuột và để 'không di chuột' sử dụng chuyển đổi đảo ngược chúng Điều này có thể hữu ích cho các hiệu ứng menu và nút để làm cho một thành phần trên trang xuất hiện nhanh chóng rồi mờ dần hoặc ngược lại Hãy nhớ rằng các hiệu ứng chuyển tiếp được thiết lập trong. câu lệnh di chuột là những câu lệnh sẽ được sử dụng khi trạng thái di chuột được áp dụng. Cài đặt chuyển đổi 'mặc định' sẽ được sử dụng khi trở về trạng thái mặc định CSS có tốt cho hoạt ảnh không?Hoạt ảnh CSS làm cho trang web hấp dẫn về mặt trực quan và nâng cao trải nghiệm người dùng . Chúng tôi hy vọng bạn có thể lấy cảm hứng từ 30 ví dụ hoạt hình CSS thú vị hàng đầu này để tạo một trang web hoạt hình tuyệt vời.
CSS hiển thị có thể hoạt hình được không?Bạn cũng không thể sử dụng thuộc tính hiển thị trong hoạt ảnh CSS .
Làm cách nào để sử dụng CSS động trong tệp CSS?Việc sử dụng thư viện rất đơn giản, có thể tải xuống dưới dạng một tệp CSS và thêm vào dự án của bạn để sử dụng một trong nhiều hoạt ảnh được xác định trước bằng cách thêm một lớp vào một phần tử . Bạn có thể tùy chỉnh các hoạt ảnh đã chọn bằng cách đặt độ trễ và tốc độ của hiệu ứng. . You can customize selected animations by setting the delay and speed of the effect.
Hoạt ảnh được thực hiện bằng CSS hay JavaScript?Hầu hết các hoạt ảnh cơ bản đều có thể được tạo bằng CSS hoặc JavaScript , nhưng lượng nỗ lực và thời gian sẽ khác nhau (xem thêm Hiệu suất CSS so với JavaScript). Mỗi cái đều có ưu và nhược điểm, nhưng đây là những hướng dẫn tốt. Sử dụng CSS khi bạn có các trạng thái nhỏ hơn, độc lập cho các phần tử giao diện người dùng. |
