Thực đơn
trang chủInternet

Hiệu ứng CSS. Chín ví dụ hoạt hình CSS3 đơn giản. Đồng hồ CSS3 với jQuery

Nếu bạn thích hiệu ứng này, bạn chỉ cần sao chép mã đã hoàn thành và sử dụng nó!

Làm cho trang web của bạn trở nên sống động!

Các hiệu ứng di chuột khác nhau có thể mang lại sự mới mẻ cho các trang trên trang web của bạn. Trước đây, để đạt được bất kỳ hiệu ứng nào, bạn phải xử lý javascript, nhưng ngày nay, sau sự ra đời của công nghệ CSS3, mọi thứ đều có thể được thực hiện mà không cần sử dụng javascript.

Tất cả các ví dụ ngày nay đều được triển khai và tối ưu hóa cho các trình duyệt hiện đại mới và chắc chắn sẽ hoạt động trong đó (ví dụ: trong Mozilla hoặc các trình duyệt thuộc dòng WebKit). Chúng tôi không thể đảm bảo với bạn rằng nó sẽ hoạt động trong IE, nhưng trong các phiên bản mới nhất, các hiệu ứng chắc chắn sẽ hoạt động như bình thường. Nhưng đừng quên rằng đối với mỗi hiệu ứng, một tùy chọn khôi phục hấp dẫn đã được chuẩn bị trong trường hợp trình duyệt vẫn không hỗ trợ hiệu ứng đó.

01. Thu phóng

Thử nghiệm: Xem

Hiệu ứng này rất dễ thực hiện và có thể được thực hiện theo nhiều cách. Chúng tôi đã sử dụng một phương pháp trong đó tham số lề được thêm vào mỗi hình ảnh và sau đó, khi di con trỏ chuột, tham số này sẽ bị xóa. Giả sử cài đặt lề bắt đầu ở 15 pixel và khi di chuột, nó trở thành 2 pixel, khiến hình ảnh có vẻ như nhảy lên. Bạn cũng có thể chỉ cần sử dụng hiệu ứng này với văn bản, ngay cả khi các liên kết được đặt theo chiều dọc thay vì chiều ngang.

Quá trình chuyển đổi ở đây có thể được thiết lập theo ý của bạn và hiệu ứng cũng sẽ hấp dẫn mà không cần bất kỳ sự chuyển đổi nào. Ví dụ: chúng tôi đã tạo hiệu ứng mượt mà hơn một chút, điều mà chúng tôi nghĩ sẽ tạo thêm chút tinh tế cho hiệu ứng.

Mã CSS hiệu ứng nâng cao

Hình ảnh Ex1(
đường viền: 5px liền khối #ccc;
nổi: trái;
lề: 15px;
-webkit-transition: giảm bớt lề 0,5 giây;
-moz-transition: giảm nhẹ lề 0,5 giây;
-o-transition: nới lỏng lề 0,5 giây;
}

Hình ảnh Ex1: di chuột (
lề trên: 2px;
}
02. Xếp chồng và phát triển


Thử nghiệm: Xem

Tác giả của hiệu ứng này rõ ràng muốn đạt được một loại hiệu ứng đèn dung nham nào đó, vì khi bạn di con trỏ chuột qua danh sách các liên kết, mỗi hình ảnh sẽ từ từ mở rộng và sau đó trở về kích thước ban đầu.

Để triển khai ở đây, hình ảnh có kích thước 400x133 pixel đã được sử dụng. Sau đó, chúng được thay đổi kích thước thành 300x100 pixel bằng CSS và được mở rộng khi di chuột qua. Vì trong ví dụ này, toàn bộ danh sách được căn giữa nên kích thước mới của hình ảnh sẽ làm lệch toàn bộ căn chỉnh. Vấn đề này có thể được giải quyết bằng cách đặt lề âm bằng một nửa chiều rộng của hình ảnh được phóng to.

Mã CSS cho Stack & Grow

/*Ví dụ 2*/
#thùng đựng hàng (
chiều rộng: 300px;
lề: 0 tự động;
}

#ex2 img(
chiều cao: 100px;
chiều rộng: 300px;
lề: 15px 0;
-webkit-transition: tất cả đều dễ dàng;
-moz-transition: tất cả 1 đều dễ dàng;
-o-transition: tất cả các số 1 đều dễ dàng;
}

#ex2 img:di chuột (
chiều cao: 133px;
chiều rộng: 400px;
lề trái: -50px;
}
03. Làm mờ văn bản


Thử nghiệm: Xem

Ở đây, tác giả muốn tạo một cái gì đó giống như một sự kiện kiểu javascript trong đó bạn di chuột qua một mục và hiệu ứng được hiển thị trên một mục khác. Ở đây, văn bản và hình ảnh được chụp rồi đặt vào một div căn trái riêng biệt. Tiếp theo, các tham số color: Transparent và line-height: 0px đã được thêm vào div. Điều này cho phép chúng tôi đặt văn bản dọc theo cạnh trên của div và ẩn nó hoàn toàn.

Để làm cho văn bản xuất hiện trở lại, chúng ta chỉ cần thay đổi màu sắc và chiều cao của dòng. Khi bạn di chuột qua hình ảnh, văn bản sẽ xuất hiện trở lại. Hiệu ứng rất hài hước và dễ dàng.

Làm mờ văn bản trong mã CSS có hiệu lực

#ex3 (
chiều rộng: 730px;
chiều cao: 133px;
chiều cao dòng: 0px;
màu sắc: trong suốt;
cỡ chữ: 50px;
họ phông chữ: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
trọng lượng phông chữ: 300;
chuyển đổi văn bản: chữ hoa;

}

#ex3:di chuột (
chiều cao dòng: 133px;
màu sắc: #575858;
}

#ex3 img(
nổi: trái;
lề: 0 15px;
}
04. Ảnh bị vẹo


Thử nghiệm: Xem

Hiệu ứng này rất đơn giản nhưng sẽ rất tuyệt vời cho một thư viện hình thu nhỏ. Để bắt đầu, bạn cần tạo một lưới các hình ảnh, sau đó xoay hình ảnh khi bạn di chuột qua chúng, điều này sẽ tạo ra hiệu ứng hấp dẫn.

Có rất nhiều giá trị CSS mới được sử dụng ở đây, vì vậy, bạn cũng nên cân nhắc quay lại các phiên bản trình duyệt cũ hơn. Tuy nhiên, thư viện của chúng tôi sẽ sử dụng các hiệu ứng chuyển tiếp, biến đổi và đổ bóng theo yêu cầu của bạn. Việc chuyển đổi sẽ chịu trách nhiệm xoay hình ảnh và các chuyển đổi sẽ chịu trách nhiệm tạo ra hiệu ứng mềm mại và mượt mà.

Đây là nơi bạn có thể sử dụng bộ chọn giả.

Mã CSS cho Ảnh bị vẹo

#ex4 (
chiều rộng: 800px;
lề: 0 tự động;
}

#ex4 img (
lề: 20px;
đường viền: 5px liền khối #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
bóng hộp: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: tất cả 0,5 giây dễ dàng;
-moz-transition: tất cả đều dễ dàng 0,5 giây;
-o-transition: tất cả đều dễ dàng 0,5 giây;
}

#ex4 img:di chuột (
-webkit-transform: xoay (-7deg);
-moz-transform: xoay(-7deg);
-o-transform: xoay(-7deg);
}
05. Đi vào và suy ngẫm


Thử nghiệm: Xem

Hiệu ứng này khó thực hiện hơn một chút, vì vậy chúng tôi phải mày mò một chút để đạt được hiệu ứng tốt. Vị trí hình ảnh mặc định hơi trong suốt. Sau đó, khi bạn di chuột qua hình ảnh, mức độ trong suốt sẽ giảm xuống và hình ảnh sẽ trở lại hình dáng ban đầu, cùng với ánh sáng và phản chiếu nhẹ (chỉ dành cho trình duyệt WebKit).

Thật không may, hình ảnh phản chiếu không hẳn là sự chuyển tiếp nên nó xuất hiện ngay lập tức mặc dù phần còn lại của nội dung xuất hiện ở chế độ chuyển động chậm.

Nếu bạn bối rối về CSS phản chiếu, bạn có thể đọc thêm về nó trong bài viết này (David Walsh).

Làm mờ dần và phản ánh mã CSS

#ex5 (
chiều rộng: 700px;
lề: 0 tự động;
chiều cao tối thiểu: 300px;
}

#ex5 img (
lề: 25px;
độ mờ: 0,8;
đường viền: 10px liền khối #eee;

/*Chuyển tiếp*/
-webkit-transition: tất cả đều dễ dàng 0,5 giây;
-moz-transition: tất cả đều dễ dàng 0,5 giây;
-o-transition: tất cả đều dễ dàng 0,5 giây;

/*Sự phản xạ*/
-webkit-box-reflect: dưới 0px -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ(trong suốt), color-stop(.7, trong suốt), đến(rgba(0,0,0,0.1)) );
}

#ex5 img:di chuột (
độ mờ: 1;

/*Sự phản xạ*/
-webkit-box-reflect: dưới 0px -webkit-gradient(tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ(trong suốt), color-stop(.7, trong suốt), đến(rgba(0,0,0,0.4)) );

/*Ánh sáng*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
bóng hộp: 0px 0px 20px rgba(255,255,255,0.8);
}
Phần kết luận

5 ví dụ này đủ để truyền cảm hứng cho bạn tạo ra thứ gì đó của riêng mình. Hãy nhớ rằng bạn luôn có thể thử nghiệm các ví dụ làm sẵn và sau đó cho chúng tôi biết về chúng.

Nếu bạn đã bắt gặp những hiệu ứng hấp dẫn khác ở đâu đó trên mạng thì hãy cho chúng tôi và những độc giả khác biết về nó.

Trước hết, đối với những người chưa hiểu rõ hoặc chưa hiểu rõ về chủ đề này, tôi sẽ giải thích ngắn gọn hiệu ứng di chuột là gì. Đây là nhiều loại hiệu ứng khác nhau (chú thích bật lên, chú giải công cụ, chuyển tiếp mượt mà, chuyển đổi, xoay, phóng to, dịch chuyển, v.v.) được áp dụng cho các thành phần trang web khi bạn di con trỏ chuột qua chúng. Những hiệu ứng này có thể được triển khai bằng nhiều plugin jQuery hoặc CSS3 thuần túy.
Hôm nay tôi đã chuẩn bị nhiều lựa chọn hiệu ứng di chuột ban đầu cho hình ảnh được tạo bằng CSS3 mà không cần kết nối thư viện javascript. Tôi sẽ không nói về những ưu điểm và nhược điểm của việc triển khai hiệu ứng di chuột trong CSS3 thuần túy, đó là một chủ đề khác, chỉ cần xem các ví dụ và nếu cần, hãy sử dụng ví dụ bạn thích trên trang web của mình. Tất cả các hiệu ứng được trình bày trong bài đánh giá đều được cung cấp ví dụ demo và tài liệu chi tiết kèm theo mã nguồn. Các hướng dẫn sử dụng chủ yếu bằng ngôn ngữ tư sản, nhưng mọi thứ ít nhiều đều trực quan.

Tôi muốn bạn chú ý ngay đến thực tế là tất cả các ví dụ này sẽ chỉ hoạt động chính xác trong các trình duyệt hiện đại hỗ trợ thuộc tính CSS3.

Để không làm hỏng bức tranh tổng thể, tôi không làm sai lệch tên của các hiệu ứng bằng bản dịch máy (ngoại trừ một số hiệu ứng), tôi để nguyên tên gốc như nhà phát triển đã gọi.

Một hiệu ứng rất thú vị khi di chuột qua hình ảnh thu nhỏ, sử dụng các đường nét tinh xảo trong thiết kế và kiểu chữ. Một số loại hiệu ứng khác nhau để xuất hiện chú thích hình ảnh, chuyển đổi 3D mềm mại và không xâm phạm cũng như chuyển tiếp mượt mà các phần tử giả. Chỉ hoạt động trong các trình duyệt hiện đại.

iHover là một bộ sưu tập ấn tượng gồm các hiệu ứng di chuột CSS3 thuần túy, có hỗ trợ Bootstrap 3. Được xây dựng trên Scss CSS (tệp), dễ dàng sửa đổi bằng các biến. Mã này có tính mô-đun, không cần phải bao gồm toàn bộ tệp. Hơn 30 hiệu ứng khác nhau trong một gói. Mọi thứ đều được ghi lại khá đầy đủ và các hiệu ứng rất dễ sử dụng. Tất cả những gì bạn cần làm là xây dựng đánh dấu HTML một cách chính xác và đưa tệp CSS vào tác phẩm của mình.

Tạo một số hiệu ứng di chuột đơn giản nhưng đầy phong cách cho chú thích hình ảnh. Ý tưởng là di chuột qua các hình thu nhỏ để hiển thị tiêu đề, tên tác giả và nút liên hệ. Đối với một số hiệu ứng, chuyển đổi hình ảnh 3D được sử dụng.

Một hiệu ứng chuyển tiếp rất đơn giản, không có chuông và còi đặc biệt, một hình ảnh tròn hoàn toàn trong một khung hình, biến đổi bằng cách thay đổi tiêu điểm khi di chuột và thế là xong.

Hiệu ứng di chuột cho hình thu nhỏ bằng CSS3

Nhà phát triển định vị tác phẩm của mình như một ví dụ về thư viện hình ảnh với các hiệu ứng chuyển tiếp khi chú thích (chú thích) xuất hiện trên hình thu nhỏ. Sự hỗ trợ tự tin của các trình duyệt hiện đại, bao gồm IE 9+, được tuyên bố. Tất nhiên, thật khó để gọi nó là một phòng trưng bày đầy đủ, nhưng hiệu ứng xuất hiện của chữ ký khá thú vị.

Một bộ quy tắc CSS khác để tạo hiệu ứng chuyển đổi ấn tượng khi di chuột qua các hình thu nhỏ có hình tròn hoàn hảo. Gói này chứa 7 loại chuyển tiếp CSS3, tài liệu rất chi tiết về cấu hình và cách sử dụng. Các hiệu ứng được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Xoay hình thu nhỏ khi di chuột

Một hiệu ứng đơn giản là xoay các hình thu nhỏ tròn khi bạn di con trỏ chuột lên chúng, giống như hiệu ứng bạn có thể thấy trên blog của tôi, trong phần thông báo về bài đăng trên trang chính. Được triển khai với một vài dòng mã css.

Dịch theo nghĩa đen: “Hiệu ứng gợi cảm khi di chuột qua hình ảnh”. Tất nhiên, bạn khó có thể nhận thấy bất cứ điều gì quá gợi cảm trong hiệu ứng này, trừ khi bạn có trí tưởng tượng phong phú, nhưng hiệu ứng này rất thú vị theo cách riêng của nó và đáng được chú ý.

Năm hiệu ứng khác nhau cho hình ảnh khi bạn di chuột qua chúng. Chữ ký bật lên có ba biến thể, rèm ở dạng thay đổi mức độ trong suốt và xoay theo chuyển động ngang.

4 loại hiệu ứng hoạt hình cho chú thích hình ảnh, được triển khai độc quyền bằng CSS3. Các vị trí khác nhau khi xuất hiện và hiệu ứng chuyển tiếp, thiết kế khá chuẩn. Để hiểu cách hoạt động của hoạt ảnh, hãy xem mã nguồn của trang demo; Tôi không tìm thấy bất kỳ tài liệu riêng biệt nào.

Các phòng trưng bày thu nhỏ được sắp xếp theo dạng lưới với nhiều hiệu ứng khác nhau để xuất hiện chữ ký, xoay, phát triển, cửa sổ bật lên, v.v. Tài liệu hướng dẫn sử dụng và cấu hình khá thưa thớt nhưng nếu thực sự muốn bạn có thể tìm hiểu.

Hiệu ứng này không có gì đặc biệt, một sự thay đổi tầm thường về độ sáng của hình ảnh khi di chuột, ngoại trừ các yếu tố hoạt hình đã được thêm vào. Bạn sẽ phải tự mình tìm ra các chi tiết triển khai bằng cách đặt ra mã nguồn của bản demo.

Một bộ 10 hiệu ứng di chuột khác cho hình ảnh, nhiều sửa đổi khác nhau cho hình thu nhỏ khi di chuột, phóng to, xoay, xoay, làm tối, v.v.

Hiệu ứng hoạt hình viền

Nhiều hiệu ứng hoạt hình khung hình xung quanh hình ảnh trông khá hấp dẫn, có hướng dẫn chi tiết cách thiết lập và sử dụng.

Hiệu ứng di chuột CSS3 gốc được sử dụng để hiển thị hiệu quả chú thích hình thu nhỏ của hình ảnh khi di chuột. Bộ quy tắc CSS bao gồm 10 hiệu ứng khác nhau mà bạn có thể sử dụng riêng cho các hình ảnh khác nhau. Các hiệu ứng thực sự ấn tượng, đặc biệt là khi tất cả được thực hiện bằng CSS3. Hướng dẫn chi tiết sẽ giúp bạn tìm ra cái gì.

Ý tưởng là tạo một SVG làm hình nền cho một số văn bản và biến thành hình dạng khác khi di chuột qua. Bằng cách này, bạn có thể thực hiện nhiều tùy chọn khác nhau; trong ví dụ này, ba loại hiệu ứng chuyển tiếp được hiển thị. Ưu điểm của việc sử dụng SVG là chúng ta có thể thay đổi kích thước biểu mẫu để vừa với kích thước của vùng chứa chính.

Hình ảnh trượt

Bản chất của hiệu ứng này là hình ảnh di chuyển lên xuống để làm xuất hiện chú thích. Nếu bạn làm việc với các tham số kiểu, tôi nghĩ bạn có thể đạt được một số hiệu ứng khá đẹp, nhưng theo mặc định, mọi thứ trông rất đơn giản.

Với hiệu ứng này, mọi thứ đều đơn giản, chú thích cho hình ảnh trượt ra ở trên cùng bên phải hoặc dưới cùng bên trái, dưới dạng dải băng có nền tối mờ, mọi thứ đều được định dạng lại rất đơn giản bằng thuộc tính css.

Một giải pháp thú vị: các hình thu nhỏ được trình bày ở dạng tối; khi bạn di chuột qua chúng, hình ảnh sẽ xuất hiện và chữ ký hiện lên trên nền sáng.

Chú thích cho hình ảnh xuất hiện từ góc và mở rộng theo đường chéo trên toàn bộ khu vực của hình ảnh.

Một số giải pháp thú vị hơn để triển khai chú thích bật lên cho hình thu nhỏ của hình ảnh. Trong trình chỉnh sửa trực tuyến, bạn có thể thử nghiệm các thông số và đạt được kết quả ấn tượng hơn.

Bộ hiệu ứng đẹp mắt khi di chuột qua hình thu nhỏ, nhiều kiểu dáng và thiết kế chú thích cho ảnh. Các đường kẻ mỏng tương phản với nền hơi tối tạo nên các khối thông tin dễ đọc.

Hình dạng kỳ lạ và hiệu ứng phóng to kết hợp với hiệu ứng hoạt hình xuất hiện chú thích cho hình thu nhỏ của hình ảnh.

Hiệu ứng tuyệt vời của việc phủ các biểu tượng lên hình thu nhỏ của hình ảnh với nhiều kiểu dáng khác nhau. Ví dụ này sử dụng ký hiệu (+) được viền trong một vòng tròn sử dụng bán kính đường viền: trong CSS, bạn cũng có thể sử dụng phông chữ biểu tượng để làm cho bảng bật lên có nhiều thông tin hơn.

6 chú thích cho hình ảnh

6 Tùy chọn hiển thị chú thích hình ảnh bật lên khi di chuột bằng CSS3. Bài học chi tiết về cách triển khai và cấu hình, các nguồn có sẵn để tải xuống.

Cách tạo một số hiệu ứng di chuột chú thích tinh tế và hiện đại.

Tìm hiểu cách tạo một số hiệu ứng di chuột đơn giản nhưng đầy phong cách cho chú thích hình ảnh. Ý tưởng là có một lưới các số liệu và áp dụng hiệu ứng di chuột vào các mục sẽ hiển thị chú thích với tiêu đề, tác giả và nút liên kết.

Hiệu ứng di chuột CSS3 nhận biết hướng với jQuery

Tạo hiệu ứng di chuột nhận biết hướng bằng CSS3 và jQuery.

Tìm hiểu cách tạo hiệu ứng di chuột nhận biết hướng bằng cách sử dụng một số tính năng tốt của CSS3 và jQuery. Ý tưởng là có một lớp phủ nhỏ trượt lên trên một số hình thu nhỏ theo hướng mà chúng ta đang sử dụng chuột.

Hiệu ứng di chuột vòng tròn với chuyển tiếp CSS

Hướng dẫn cách tạo các hiệu ứng di chuột khác nhau trên vòng tròn bằng chuyển tiếp CSS và xoay 3D

Hướng dẫn này sẽ cho bạn thấy năm ví dụ về hiệu ứng di chuột CSS3 bằng cách sử dụng các thuộc tính CSS khác nhau. Xin lưu ý rằng các hiệu ứng CSS3 sẽ chỉ hoạt động bình thường trong các trình duyệt hiện đại hỗ trợ các thuộc tính CSS3 đang được sử dụng.

Hiệu ứng di chuột nút CSS độc đáo

Một số nút và hiệu ứng phong cách sáng tạo và hiện đại cho cảm hứng của bạn.

Bộ nút CSS này bao gồm một số kiểu và hiệu ứng đơn giản, sáng tạo và tinh tế để truyền cảm hứng cho bạn. Các hiệu ứng có thể được nhìn thấy khi di chuột vào một số nút và nhấp vào các nút khác. Hầu hết, các chuyển tiếp CSS được sử dụng nhưng cũng có các hoạt ảnh CSS và đối với một số nút, một chút JavaScript để thêm/xóa các lớp hiệu ứng cũng được sử dụng.

Hiệu ứng di chuột biểu tượng

Một tập hợp các hiệu ứng di chuột biểu tượng tròn đơn giản với các hiệu ứng chuyển tiếp và hoạt ảnh CSS mang lại cảm hứng cho bạn.

Đây là bộ sưu tập các hiệu ứng di chuột biểu tượng đơn giản. Tạo hiệu ứng tinh tế và phong cách bằng cách sử dụng các hiệu ứng chuyển tiếp và hoạt ảnh CSS trên các điểm neo và các phần tử giả của chúng.

Hiệu ứng di chuột là một chủ đề khá thú vị để nghiên cứu. Rốt cuộc, việc sử dụng chúng có thể làm cho trang web của bạn năng động và sống động hơn. Hôm nay chúng ta sẽ xem xét một số hiệu ứng khi làm việc với hình ảnh. Mỗi ví dụ đều có mã HTML và CSS mà bạn có thể thấy trong thực tế.

Tăng

Để bắt đầu, chúng tôi sẽ đảm bảo rằng khi người dùng di chuột qua hình ảnh, ảnh sẽ được phóng to nhưng vẫn nằm trong giới hạn của nó.

Đây HTML-mã số:

"http://lorempixel.com/400/400/people/9" alt="chân dung" > !}

Xin lưu ý rằng hình ảnh được sử dụng trong ví dụ có kích thước 400px x 400px. Bây giờ hãy nhìn CSS.

/*GROW*/ .grow img ( chiều cao : 300px ; chiều rộng : 300px ; -webkit-transition: dễ dàng trong tất cả 1 giây; -moz-transition: dễ dàng trong tất cả 1 giây; -o-transition: dễ dàng trong tất cả 1 giây; -ms-transition: tất cả dễ dàng 1 giây; chuyển tiếp: tất cả 1 giây dễ dàng; ) .grow img:hover ( chiều rộng : 400px ; chiều cao : 400px ; )

Trước tiên, chúng tôi đặt kích thước hình ảnh zoompx thành 300px, sau đó khi người dùng di chuột qua kích thước đó, chúng tôi sẽ tăng kích thước lên 400px. Vì chúng tôi đã đặt tràn thành ẩn nên điều này sẽ cho phép chúng tôi có được hiệu ứng chia tỷ lệ.

Nén

Trong ví dụ trước, chúng ta đã xem hình ảnh phóng to như thế nào khi di con trỏ chuột. Hãy xem xét hiệu ứng ngược lại. Phương pháp này về cơ bản giống nhau, chỉ khác là lần này bạn sẽ bắt đầu với kích thước 400px và giảm chúng xuống 300px khi di chuột.

"http://lorempixel.com/400/400/nightlife/4" alt="thành phố" > !}

/*SHRINK*/ .shrink img ( chiều cao : 400px ; chiều rộng : 400px ; -webkit-transition: dễ dàng tất cả 1 giây; -moz-transition: dễ dàng tất cả 1 giây; -o-transition: dễ dàng tất cả 1 giây; -ms-transition: tất cả dễ dàng 1 giây; chuyển tiếp: tất cả 1 giây dễ dàng; ) .shrink img:hover ( chiều rộng : 300px ; chiều cao : 300px ; )

Xoay bên

Ở hiệu ứng sau, kích thước ảnh không thay đổi nhưng khi di chuột, ảnh sẽ dịch chuyển sang một bên. Đây là một cách hay để nhấn mạnh sự chuyển động của một vật thể.

"http://lorempixel.com/600/300/sports/8" alt="đá" > !}

Ở đây, chúng tôi đang sử dụng hình ảnh rộng 600px và chỉ cao 300px - chúng tôi đang thay đổi vị trí nằm ngang của ảnh và không cần áp dụng hiệu ứng cho chiều cao.

/*SIDEPAN*/ .sidepan img ( lề trái : 0px ; -webkit-transition: dễ dàng lề 1 giây; -moz-transition: dễ dàng lề 1 giây; -o-transition: dễ dàng lề 1 giây; -ms-transition: dễ dàng lề 1 giây ; chuyển đổi: lề 1 dễ dàng; ) .sidepan img:hover ( lề trái : -200px ; )

Để tạo hiệu ứng lia máy, chúng ta sẽ không thay đổi kích thước hình ảnh như lần trước mà thay vào đó sử dụng lề để đặt hình ảnh ở bên trái. Nếu bạn muốn hình ảnh di chuyển sang bên phải, hãy sử dụng lề phải.

Xoay dọc

Để truyền tải hiệu ứng chuyển động, chúng ta sẽ sử dụng lại hiệu ứng này - nó cũng phù hợp để tạo ảnh lia dọc.

"http://lorempixel.com/300/600/sports/5" alt="leo lên" > !}

/*VERTPAN*/ .vertpan img ( lề-top : 0px ; -webkit-transition: dễ dàng lề 1 giây; -moz-transition: dễ dàng lề 1 giây; -o-transition: dễ dàng lề 1 giây; -ms-transition: dễ dàng lề 1 giây ; chuyển đổi: lề 1 dễ dàng; ) .vertpan img:hover ( lề-top : -200px ; )

Mã gần giống như lần trước, chỉ có điều bây giờ thay vì lề trái chúng ta sử dụng lề trên.

Chuyển đổi

Các hiệu ứng sau đây năng động hơn.

Nghiêng

Bây giờ hãy đảm bảo rằng khi bạn di chuột qua hình ảnh, góc nghiêng sẽ thay đổi.

"http://lorempixel.com/300/300/transport/5" alt="ô tô" > !}

/*TILT*/ .tilt ( -webkit-transition: dễ dàng tất cả 0 .5 giây; -moz-transition: dễ dàng tất cả 0 .5 giây; -o-transition: dễ dàng tất cả 0 .5 giây; -ms-transition: tất cả 0 .5 giây dễ dàng; chuyển tiếp: tất cả 0 .5 giây dễ dàng; ) .tilt :hover ( -webkit-transform: xoay(-10deg) ; -moz-transform: xoay(-10deg) ; -o-transform: xoay(-10deg) ; - biến đổi ms: xoay(-10deg) ; biến đổi: xoay(-10deg) ; )

Như bạn có thể thấy, tất cả những gì chúng ta cần làm là xoay hình ảnh mười độ. Đơn giản và hiệu quả!

bo tròn các góc

Khi người dùng di chuột qua hình ảnh, nó bắt đầu xoay, chuyển từ hình tròn sang hình vuông.

"http://lorempixel.com/300/300/nature/5" alt="bãi biển" > !}

/*MORPH*/ .morph ( -webkit-transition: dễ dàng tất cả 0 .5 giây; -moz-transition: dễ dàng tất cả 0 .5 giây; -o-transition: dễ dàng tất cả 0 .5 giây; -ms-transition: tất cả 0 .5 giây dễ dàng; chuyển tiếp: tất cả 0 .5 giây dễ dàng; ) .morph :hover ( bán kính đường viền: 50 % ; -webkit-transform: xoay (360deg); -moz-transform: xoay(360deg); -o-transform: xoay(360deg); -ms-transform: xoay (360deg); biến đổi: xoay (360deg); )

Cái này có một lớp hình thái được thiết lập sẽ bắt đầu xoay 360 độ khi bạn di chuột qua nó và bán kính đường viền sẽ dần thay đổi thành 50%, dẫn đến nó trở thành một hình tròn.

Tập trung

Đây là một cách khác để sử dụng bán kính đường viền để làm tròn hình ảnh. Tuy nhiên, lần này chúng ta sẽ không chỉ tăng bán kính đường viền mà còn tăng độ dày của nó. Kết hợp với hộp viền, điều này sẽ tạo hiệu ứng tập trung vào một phần cụ thể của hình ảnh.

"http://lorempixel.com/300/300/sports/1" alt="dế" > !}

/*FOCUS*/ .focus ( -webkit-transition: dễ dàng ở tất cả 1s; -moz-transition: dễ dàng ở tất cả 1s; -o-transition: dễ dàng ở tất cả 1s; -ms-transition: dễ dàng ở tất cả 1s; transition: dễ dàng ở tất cả 1s; ) .focus :hover ( border : 70px Solid # 000 ; bán kính đường viền: 50 % ; }

Chúng tôi lấy đường viền 10px và biến nó thành đường viền màu đen 70px khi xoay bán kính lên 50%, giống như chúng tôi đã làm trong ví dụ trước.

Bộ lọc webkit

Không giống như các ví dụ trên, mỗi ví dụ sử dụng nhiều tiền tố để đảm bảo khả năng tương thích tối đa của trình duyệt, các ví dụ sau chỉ sử dụng tiền tố WebKit. Những ví dụ này chỉ hoạt động trong Safari và Chrome. Bất chấp những hạn chế của chúng, bộ lọc Webkit cho phép bạn thực hiện một số hiệu ứng khá tuyệt vời! Thử nghiệm

Mơ hồ


Hiệu ứng đầu tiên chúng ta sẽ áp dụng là làm mờ đơn giản. Bây giờ có thể đạt được độ mờ chỉ bằng một dòng mã nhỏ.

Bài đăng chứa tuyển tập các hiệu ứng và hoạt ảnh CSS khác nhau có thể hữu ích trong công việc của bạn và cũng sẽ loại bỏ nhu cầu liên tục sử dụng JavaScript. Các ví dụ này có thể không phải là mới nhất hoặc khác thường nhất, nhưng theo tôi, chúng rất hữu ích.

1. Đồng hồ CSS3 với jQuery

Đồng hồ này được tạo bằng một trong những công cụ CSS3 chính - xoay và kết nối thư viện JQuery.

2. Đồng hồ analog CSS

Đồng hồ analog, cổ điển hơn. Chúng được tạo bằng cách sử dụng chuyển đổi webkit và thuộc tính CSS biến đổi. Nhưng để thời gian tương ứng với hiện tại, bạn cần có JavaScript.

3. Xoay khối 3D

Việc xoay và di chuyển dọc theo các cạnh của khối lập phương sẽ được thực hiện bằng cách sử dụng các phím “lên”, “xuống”, “trái” và “phải” tiêu chuẩn. Bản thân hình 3D được xây dựng bằng cách sử dụng phối cảnh webkit, -webkit-transform và -webkit-transition.

4. Một số hình khối 3D có thể thu vào

Hiện đã có một số khối 3D được trình bày ở đây sử dụng CSS3 cũng như các thuộc tính chuyển đổi và chuyển đổi trực tiếp. Di con trỏ qua hình khối sẽ khiến nó di chuyển sang một bên, hiển thị văn bản ở phía bên kia của hình.

5. Thực đơn đàn accordion

Hiệu ứng menu accordion dựa trên CSS thuần túy, trong đó việc nhấp vào từng dòng sẽ mở ra một cửa sổ bổ sung trong phần nội dung của danh sách. Hoạt ảnh tùy chỉnh trong trình duyệt dựa trên WebKit.

6. Cuộn thị sai bằng CSS

Đây là hoạt ảnh cuộn thị sai hoạt hình sử dụng chuyển tiếp CSS dựa trên WebKit. Khi bạn di chuột qua cửa sổ văn bản, các ngôi sao ở nền bắt đầu di chuyển mượt mà sang một bên. Hiệu ứng của chuyến bay được tạo ra.

7. Ma trận

Bộ phim đình đám “The Matrix” là một trong những bộ phim khoa học viễn tưởng hay nhất. Ví dụ này cho thấy cách tạo lại hoạt ảnh tuyệt vời tương tự (màn hình đen với các số đang chạy) trong CSS3.

8. Palaroid động

Ví dụ này cung cấp mô tả chi tiết về cách tạo ảnh động dựa trên các lệnh CSS3. Khi bạn bấm vào một hình ảnh, nó sẽ phóng to và di chuyển lên nền trước.

9. Chia tỷ lệ hình ảnh

Trong ví dụ này, hình ảnh chỉ phóng to khi di chuột. Một hiệu ứng đơn giản nhưng đôi khi rất hữu ích.

10. Hiệu ứng JavaScript trên CSS3

Để thay thế cho JavaScript, bài đăng gợi ý bảy hiệu ứng CSS3: các khối khác nhau xoay, biến mất, di chuyển ra ngoài, phát triển, v.v.

11. Bản ghi ảo DJ Hero

Bài đăng này giải thích cách tạo bản ghi quay. Tốc độ quay có thể được điều chỉnh trực tiếp trên màn hình.

12. Vinyl trượt

Hiệu ứng trượt bản ghi vinyl được tạo bằng cách sử dụng chuyển tiếp CSS3 và HTML. Hoạt ảnh như vậy làm cho trang web trở nên sống động, thêm tính độc đáo cho bìa album tiêu chuẩn, v.v.

13. Hiệu ứng khi di chuột qua ảnh

Khi bạn di con trỏ lên một hình ảnh, nó có thể di chuyển sang một bên, xoay tròn, co lại, chuyển từ hình vuông sang hình tròn, bị mờ... Nói một cách dễ hiểu, các hình ảnh sẽ thay đổi thuộc tính của chúng theo mọi cách có thể.

14. Tam giác xoay

Khi bạn bấm vào hình tam giác, nó bắt đầu xoay.

15. Không gian

Cả một không gian vũ trụ được gói gọn trong CSS. Đây là một ví dụ về các lớp xoay (đáng chú ý hơn khi bạn thu nhỏ trong trình duyệt).

16. “Las Meninas” ở dạng 3D

Một hiệu ứng CSS thú vị làm cho bức tranh nổi tiếng "Las Meninas" của Diego Velazquez xuất hiện ba chiều.

17. CSS cho Mac OS X

Ở cuối màn hình là một tập hợp các biểu tượng chính của Mac OS X, sẽ phóng to khi di chuột qua. Hiệu ứng thêm động lực cho trang web.

18. Phương thức thả vào

Các hiệu ứng CSS3 và thuộc tính Drop-In Modals sẽ giúp bạn tạo các thay đổi phương thức nhanh chóng, sinh động và dễ dàng.

19. Đồ vật hoạt hình

Một phép biến đổi sẽ thay đổi diện mạo của một phần tử trong trình duyệt. Hiển thị bằng ví dụ về một tên lửa “bay” từ đầu này sang đầu kia của màn hình. Có thể sử dụng các công cụ di chuyển, xoay, v.v.

20. Đồng hồ màu

Đồng hồ màu dựa trên jQuery và CSS3. Một hiệu ứng tương tự sẽ có ích trong bối cảnh chờ đợi một số cuộc thi, bỏ phiếu và những thứ tương tự hoàn thành.

21. Thư viện hộp đèn với jQuery và CSS3

Đây là một bộ sưu tập tuyệt vời cho phép bạn sắp xếp và sắp xếp các hình ảnh theo thứ tự ngẫu nhiên. Để tương tác, thư viện sử dụng JQuery, JQuery UI và plugin JQuery FancyBox. Lightbox hỗ trợ tiêu đề và mô tả của hình ảnh, nhóm chúng lại và tự động sắp xếp các slide liên tiếp.

22. Bản xem trước “Co giãn”

Phóng to hình ảnh xem trước khi di chuột. Như vậy, khi bạn bấm vào, menu sẽ tăng lên tương ứng.

23. Thẻ động

Ví dụ này là một bộ thẻ động sử dụng các tính năng HTML và CSS3.

24. Menu trượt JQuery

Menu trượt ví dụ được tạo bằng cách sử dụng kết hợp CSS3 và JQuery. Khi bạn di chuột qua hình ảnh, một cửa sổ bật lên có văn bản sẽ xuất hiện.

25. Tab CSS

Trong ví dụ, việc di chuột qua tiêu đề tab sẽ khiến danh sách bên dưới thay đổi.

26. Thực đơn mắt cá

Ví dụ minh họa cách tạo menu Mắt cá bằng hoạt ảnh CSS và SVG. Là một phần thưởng bổ sung, SVG demo được sử dụng trong thẻ IMG.

27. Menu thả xuống

Loại này cung cấp khả năng điều hướng rất thuận tiện thông qua menu chính, nhờ sử dụng các chuyển tiếp CSS3.

28. Tín dụng của Chiến tranh giữa các vì sao

Các khoản tín dụng nổi tiếng từ Star Wars. HTML và CSS sẽ đủ để chạy chúng.

29. Thêm hiệu ứng mắt cá trên CSS

Một lần nữa, các biểu tượng tăng lên khi di chuột qua.

30. Hoạt hình theo từng khung hình

Một số tùy chọn trình diễn là có thể.
Trong ví dụ đầu tiên, để đảm bảo thay đổi khung hình, bạn cần nhấp vào hình ảnh. Mỗi cú nhấp chuột là một chuyển động. Các khung hình được lặp lại, tạo thành một vòng lặp nhất định.
Trong ví dụ thứ hai, để thay đổi khung hình, chỉ cần di chuyển con trỏ lên hình ảnh. Theo đó, tốc độ hoạt ảnh sẽ phụ thuộc vào tốc độ di chuyển của chuột.

31. Đế quốc AT-AT Walker

Một lần nữa Star Wars - chiếc xe tập đi AT-AT di chuyển này được tạo bằng CSS3.

32. Một chiếc đàn accordion CSS khác

Khi bạn bấm vào một hàng, bảng sẽ mở rộng.

33. Menu trượt đơn giản

40. Menu thả xuống
Một tùy chọn khác cho menu thả xuống đơn giản và đẹp mắt bằng CSS.

  • Dịch

Sức mạnh của CSS3 là rất lớn và trong hướng dẫn này, bạn sẽ thấy cách sử dụng nó một cách sáng tạo. Chúng ta sẽ tạo một số hiệu ứng di chuột bằng cách sử dụng chuyển tiếp CSS3. Di chuột qua hình thu nhỏ sẽ hiển thị mô tả về hình thu nhỏ, sử dụng các kiểu khác nhau trong mỗi ví dụ.

Xin lưu ý rằng những ví dụ này sẽ chỉ hoạt động chính xác trong các trình duyệt hiện đại hỗ trợ thuộc tính CSS3.

đánh dấu HTML
Cấu trúc đánh dấu rất đơn giản và trực quan. Tạo vùng chứa sẽ chứa hình ảnh và bất kỳ thông tin nào khác như tiêu đề, mô tả, v.v.

Bên trong khối có lớp khung nhìn, chúng ta sẽ chèn một phần tử có lớp mặt nạ, phần tử này sẽ chịu trách nhiệm về các hiệu ứng CSS3 của chúng ta, bên trong khối đó, chúng ta sẽ đặt tiêu đề, mô tả và liên kết đến hình ảnh đầy đủ. (Đối với một số ví dụ, chúng ta sẽ cần thêm mặt nạ làm thành phần riêng biệt và gói mô tả trong div bằng một lớp nội dung.)

Tiêu đề

Đọc thêm

CSS
Sau khi tạo đánh dấu, chúng ta sẽ tạo kiểu của mình.

Chúng tôi sẽ đặt các quy tắc chung cho phong cách của mình và sau đó chúng tôi sẽ thêm các lớp đặc biệt với các hiệu ứng mà chúng tôi muốn. Trong bài viết này, chúng tôi sẽ bỏ qua tiền tố CSS cho nhiều trình duyệt khác nhau, nhưng bạn có thể thấy chúng trong mã nguồn.
.view ( chiều rộng: 300px; chiều cao: 200px; lề: 10px; float: trái; đường viền: 10px Solid #fff; tràn: ẩn; vị trí: tương đối; căn chỉnh văn bản: giữa; bóng hộp: 1px 1px 2px #e6e6e6; con trỏ: mặc định; nền: #fff url(../images/bgimg.jpg) trung tâm trung tâm không lặp lại ) .view .mask, .view .content ( chiều rộng: 300px; chiều cao: 200px; vị trí: tuyệt đối; tràn: ẩn ; top: 0; left: 0 ) .view img ( display: block; vị trí: tương đối ) .view h2 ( text-transform: chữ hoa; color: #fff; text-align: center; vị trí: tương đối; cỡ chữ: 17px; đệm: 10px; nền: rgba(0, 0, 0, 0.8); lề: 20px 0 0 0 ) .view p ( font-family: Georgia, serif; font-style: italic; font-size: 12px; vị trí: tương đối; màu sắc: #fff; phần đệm: 10px 20px 20px; căn chỉnh văn bản: trung tâm ) .view a.info ( display: inline-block; text-trang trí: none; phần đệm: 7px 14px; nền: #000; màu : #fff; text-transform: chữ hoa; box-shadow: 0 0 1px #000 ) .view a.info:hover ( box-shadow: 0 0 5px #000 )
Bây giờ chúng ta sẽ xem xét mười hiệu ứng.

ví dụ 1

Hãy thêm một lớp view-first đặc biệt vào thành phần có lớp view để tạo hiệu ứng này. Chúng tôi sẽ thêm một lớp đặc biệt cho từng phiên bản của thành phần khung nhìn (chế độ xem đầu tiên, chế độ xem thứ hai, chế độ xem thứ ba, v.v.).


Trong ví dụ đầu tiên, chúng ta sẽ chỉ sử dụng một số hiệu ứng chuyển tiếp cơ bản để tạo hiệu ứng di chuột đẹp mắt:
.view-first img ( transition: tất cả 0,2 giây tuyến tính; ) .view-first .mask ( opacity: 0; màu nền: rgba(219,127,8, 0.7); transition: tất cả 0,4 giây dễ dàng ra vào; ) .view-first h2 ( Transform: TranslateY(-100px); opacity: 0; transition: all 0.2s easy-in-out; ) .view-first p ( Transform: TranslateY(100px); opacity: 0; transition: all 0,2 giây tuyến tính; ) .view-first a.info( opacity: 0; transition: tất cả 0,2 giây dễ dàng ra vào; )
Và bây giờ là phần thú vị nhất trong hiệu ứng của chúng ta. Khi di chuyển con trỏ qua một hình ảnh, chúng ta có thể sử dụng thuộc tính độ trễ để mô phỏng một hoạt ảnh đơn giản. Độ trễ chuyển tiếp mà chúng tôi sử dụng khi di chuột có thể được thay đổi để khác với lớp thông thường. Trong ví dụ này, chúng tôi chưa sử dụng bất kỳ độ trễ nào trong lớp thông thường, nhưng chúng tôi đã thêm độ trễ cho quá trình di chuột, điều này sẽ làm chậm một chút hiệu ứng chuyển tiếp.
.view-first:hover img ( Transform:scale(1.1); ) .view-first:hover .mask ( opacity: 1; ) .view-first:hover h2, .view-first:hover p, .view-first :hover a.info ( opacity: 1; Transform: TranslateY(0px); ) .view-first:hover p ( transition-delay: 0.1s; ) .view-first:hover a.info ( transition-delay: 0.2s ; )

Ví dụ 2

Trong ví dụ thứ hai, chúng tôi sẽ thêm một lớp view-thứ hai đặc biệt, nhưng chúng tôi sẽ để trống phần tử có lớp mặt nạ và gói mô tả trong div với lớp nội dung.

Kiểu di chuột số 2

Một số mô tả

Đọc thêm

Ở đây lớp mặt nạ sẽ có nhiều thuộc tính khác nhau, đặc biệt là chúng ta sẽ áp dụng thuộc tính biến đổi (dịch và xoay). Các thành phần mô tả sẽ được di chuyển để chúng ta có thể di chuyển chúng cùng nhau khi di chuột:
.view-giây img ( transition: tất cả 0,2 giây dễ dàng; ) .view-giây .mask ( màu nền: rgba(115,146,184, 0,7); chiều rộng: 300px; phần đệm: 60px; chiều cao: 300px; độ mờ: 0; biến đổi: dịch (265px, 145px) xoay (45deg); chuyển đổi: tất cả 0,2 giây dễ dàng ra vào; ) .view-giây h2 ( viền-dưới: 1px rắn rgba (0, 0, 0, 0,3); nền: trong suốt; lề: 20px 40px 0px 40px; biến đổi: dịch(200px, -200px); chuyển tiếp: tất cả 0,2 giây dễ dàng ra vào; ) .view-giây p ( biến đổi: dịch (-200px, 200px); chuyển tiếp: tất cả 0,2 giây dễ dàng vào ra; ) .view-giây a.info ( biến đổi: dịch (0px, 100px); chuyển đổi: tất cả 0,2 giây 0,1 giây dễ dàng ra vào; )
Đối với hiệu ứng di chuột, chúng tôi sử dụng phép biến đổi dịch để di chuyển các phần tử vào đúng vị trí. mặt nạ cũng sẽ xoay. Các phần tử mô tả sẽ di chuyển với độ trễ nhẹ:
.view-second:hover .mask ( opacity:1; biến đổi: dịch(-80px, -125px) xoay(45deg); ) .view-giây:hover h2 ( biến đổi: dịch(0px,0px); độ trễ chuyển tiếp: 0,3s; ) .view-giây:hover p ( Transform: Translate(0px,0px); transition-delay: 0,4s; ) .view-second:hover a.info ( Transform: Translate(0px,0px); transition- độ trễ: 0,5 giây; )

Ví dụ 3

Trong ví dụ thứ ba, chúng ta sẽ sử dụng phép biến đổi dịch và xoay:
.view-thứ ba img ( transition: tất cả 0,2 giây dễ dàng; ) .view-third .mask ( màu nền: rgba(0,0,0,0.6); độ mờ: 0; biến đổi: dịch (460px, -100px ) xoay(180deg);chuyển tiếp: tất cả 0,2 giây 0,4 giây dễ dàng ra vào; ) .view-thứ ba h2( biến đổi: TranslateY(-100px); chuyển tiếp: tất cả 0,2 giây dễ dàng ra vào; ) .view-thứ ba p ( biến đổi: dịchX(300px) xoay(90deg); chuyển tiếp: tất cả 0,2 giây dễ dàng vào ra; ) .view-thứ ba a.info ( biến đổi: dịchY(-200px); chuyển tiếp: tất cả 0,2 giây dễ dàng vào- ngoài; )
Đây là những hướng dẫn đơn giản sẽ được áp dụng khi di chuột. Bây giờ chúng ta sẽ lật mô tả phần tử bằng cách đặt độ trễ chuyển đổi tương ứng:
.view-third:hover .mask ( opacity:1; transition-delay: 0s; Transform: Translate(0px, 0px); ) .view-third:hover h2 ( Transform: TranslateY(0px); transition-delay: 0,5s ; ) .view-third:hover p ( biến đổi: dịchX(0px) xoay(0deg); độ trễ chuyển tiếp: 0,4s; ) .view-thứ ba:hover a.info ( biến đổi: dịchY(0px); độ trễ chuyển tiếp: 0,3 giây; )

Ví dụ 4

Trong ví dụ thứ tư, chúng tôi sẽ thực hiện việc giảm và xoay hình ảnh đơn giản trong nội dung của mình, tất cả đều nhờ vào chuyển đổi tỷ lệ. Chúng tôi sẽ đặt độ trễ chuyển tiếp thành 0,2 cho kiểu hình ảnh, nhưng khi di chuột, chúng tôi sẽ thay đổi thành 0. Thao tác này sẽ bắt đầu hoạt ảnh ngay lập tức khi di chuột nhưng sẽ trì hoãn hoạt ảnh khi con trỏ di chuyển ra xa.
.view-thứ tư img ( transition: tất cả 0,4 giây dễ dàng ra vào 0,2 giây; độ mờ: 1; ) .view-thứ tư .mask ( màu nền: rgba(0,0,0,0.8); độ mờ: 0; biến đổi: tỷ lệ (0) xoay (-180deg); chuyển đổi: dễ dàng tất cả 0,4 giây; bán kính đường viền: 0px; ) .view-thứ tư h2( độ mờ: 0; đường viền dưới cùng: 1px rắn rgba (0, 0, 0, 0.3); nền: trong suốt; lề: 20px 40px 0px 40px; chuyển tiếp: tất cả 0,5 giây dễ dàng ra vào; ) .view-thứ tư p ( độ mờ: 0; chuyển tiếp: tất cả 0,5 giây dễ dàng ra vào; ) .view-thứ tư a.info ( opacity: 0; transition: tất cả 0,5 giây dễ dàng ra vào; )
Đây là hướng dẫn để có được hiệu ứng này - bạn có thể làm bất cứ điều gì với CSS3 :).
.view-thứ tư:hover .mask ( độ mờ: 1; biến đổi: tỉ lệ(1) xoay(0deg); độ trễ chuyển tiếp: 0,2s; ) .view-thứ tư:hover img ( biến đổi: tỉ lệ(0); độ mờ: 0 ; độ trễ chuyển tiếp: 0s; ) .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info( opacity: 1; transition-delay: 0.5s; )

Ví dụ 5

Trong ví dụ thứ năm này, chúng ta sẽ sử dụng thuộc tính dịch cùng với tính năng dễ dàng ra vào của chức năng chuyển đổi thời gian để di chuyển nội dung sang bên trái.
.view-fifth img ( transition: tất cả 0,3 giây dễ dàng vào ra; ) .view-fifth .mask ( màu nền: rgba(146,96,91,0.3); biến đổi: TranslateX(-300px); độ mờ: 1; chuyển đổi: tất cả 0,4 giây dễ dàng ra vào; ) .view-fifth h2( nền: rgba(255, 255, 255, 0.5); color: #000; box-shadow: 0px 1px 3px rgba(159, 141 , 140, 0,5); ) .view-thứ năm p( độ mờ: 0; màu: #333; chuyển tiếp: tất cả 0,2 giây tuyến tính; )
Hiệu ứng di chuột sẽ dịch chuyển hình ảnh sang phải và mô tả sẽ xuất hiện ở phía bên trái, như thể nó đã dịch chuyển hình ảnh:
.view-fifth:hover .mask ( Transform: TranslateX(0px); ) .view-fifth:hover img ( Transform: TranslateX(300px); transition-delay: 0.1s; ) .view-fifth:hover p( opacity: 1; độ trễ chuyển tiếp: 0,4 giây; )

Ví dụ 6

Trong ví dụ này, chúng tôi sẽ làm cho mô tả xuất hiện ở phía trước và giảm hình ảnh về kích thước ban đầu (tỷ lệ từ 10 đến 1). Nút “đọc thêm” sẽ xuất hiện ở phía dưới (dịch).
.view-sixth img ( transition: tất cả 0,4 giây dễ dàng vào ra 0,5 giây; ) .view-sáu .mask( màu nền: rgba(146,96,91,0.5); opacity:0; transition: tất cả 0,3 s dễ dàng trong 0,4 giây; ) .view-sáu h2( opacity:0; border-bottom: 1px Solid rgba(0, 0, 0, 0.3); nền: trong suốt; lề: 20px 40px 0px 40px; biến đổi: tỉ lệ( 10); chuyển tiếp: tất cả 0,3 giây dễ dàng ra vào 0,1 giây; ) .view-sáu p ( opacity:0; biến đổi: tỉ lệ (10); chuyển đổi: tất cả 0,3 giây dễ dàng ra vào 0,2 giây; ) .view -thứ sáu a.info ( opacity:0; Transform: TranslateY(100px); transition: tất cả 0,3 giây dễ dàng ra vào 0,1 giây; )
Quá trình chuyển đổi trở lại sẽ bị trì hoãn để nó trông mượt mà:
.view-sixth:hover .mask ( opacity:1; transition-delay: 0s; ) .view-sixth:hover img ( transition-delay: 0s; ) .view-sixth:hover h2 ( opacity: 1; biến đổi: tỷ lệ (1); độ trễ chuyển tiếp: 0,1 giây; ) .view-sixth:hover p ( độ mờ:1; biến đổi: tỷ lệ (1); độ trễ chuyển tiếp: 0,2 giây; ) .view-sixth:hover a.info ( độ mờ :1; biến đổi: dịchY(0px); độ trễ chuyển tiếp: 0,3 giây; )

Ví dụ 7

Trong ví dụ thứ bảy, ý tưởng là xoay hình ảnh ở giữa và di chuyển nó ra xa. Khi đó phần mô tả sẽ hiện ra, ẩn hình ảnh xoay phía sau.
.view-seventh img( transition: tất cả 0,5 giây dễ dàng; độ mờ: 1; ) .view-seventh .mask ( màu nền: rgba(77,44,35,0.5); biến đổi: xoay (0deg) thang đo( 1); độ mờ: 0; chuyển tiếp: giảm tất cả 0,3 giây; biến đổi: dịchY(-200px) xoay (180deg); ) .view-seventh h2( biến đổi: dịchY(-200px); chuyển tiếp: tất cả 0,2 giây dễ dàng- vào ra; ) .view-thứ bảy p ( biến đổi: dịchY(-200px); chuyển tiếp: tất cả 0,2 giây dễ dàng ra vào; ) .view-thứ bảy a.info ( biến đổi: dịchY(-200px); chuyển tiếp: tất cả Dễ dàng ra vào 0,2 giây; )
Khi di chuột, chúng tôi sẽ thêm độ trễ cho các thành phần mô tả. Điều này sẽ cho phép chúng ta xem hình ảnh xoay trước khi mô tả ẩn hình ảnh. Trong quá trình chuyển đổi ngược, mọi thứ sẽ biến mất ngay lập tức và chúng ta sẽ thấy hình ảnh quay theo hướng ngược lại:
.view-seventh:hover img( biến đổi: xoay (720deg) tỉ lệ (0); độ mờ: 0; ) .view-thứ bảy:hover .mask ( độ mờ: 1; biến đổi: dịchY (0px) xoay (0deg); chuyển tiếp- độ trễ: 0,4 giây; ) .view-thứ bảy:hover h2 ( biến đổi: dịchY(0px); độ trễ chuyển tiếp: 0,7 giây; ) .view-thứ bảy:hover p ( biến đổi: dịchY(0px); độ trễ chuyển tiếp: 0,6 giây ; ) .view-thứ bảy:hover a.info ( biến đổi: dịchY(0px); độ trễ chuyển tiếp: 0,5s; )

Ví dụ 8

Trong ví dụ thứ tám, chúng ta sẽ sử dụng hoạt ảnh và tạo lại hiệu ứng thoát. Mô tả sẽ đi xuống từ dưới cùng và bật ra khỏi đường viền dưới cùng.
.view-thứ tám .mask ( màu nền: rgba(255, 255, 255, 0.7); trên cùng: -200px; độ mờ: 0; chuyển tiếp: tất cả 0,3 giây dễ dàng thoát ra 0,5 giây; ) .view-thứ tám h2( biến đổi : TranslateY(-200px); transition: tất cả 0,2 giây dễ dàng vào ra 0,1 giây; ) .view-thứ tám p ( color: #333; Transform: TranslateY(-200px); transition: tất cả 0,2 giây dễ dàng ra vào 0,2s; ) .view-thứ tám a.info ( biến đổi: dịchY(-200px); chuyển tiếp: tất cả 0,2 giây dễ dàng ra vào 0,3 giây; )
Chúng tôi sẽ thêm hoạt ảnh vào thành phần mặt nạ và xác định một số cài đặt độ trễ cho thành phần mô tả:
.view-thứ tám:hover .mask ( độ mờ: 1; top: 0px; độ trễ chuyển tiếp: 0s; hoạt hình: nảyY 0,9 giây tuyến tính; ) .view-thứ tám:hover h2 ( biến đổi: dịchY(0px); độ trễ chuyển tiếp: 0,4s; ) .view-thứ tám:hover p ( biến đổi: dịchY(0px); độ trễ chuyển tiếp: 0,2s; ) .view-thứ tám:hover a.info ( biến đổi: dịchY(0px); độ trễ chuyển tiếp: 0s; )
Để tạo lại hiệu ứng thoát thực tế, chúng ta sẽ sử dụng dịch Y, như bạn có thể thấy có một số khung tạo ra hiệu ứng này:
@keyframes nảyY ( 0% ( biến đổi: dịchY(-205px);) 40% ( biến đổi: dịchY(-100px);) 65% ( biến đổi: dịchY(-52px);) 82% ( biến đổi: dịchY(-25px) ;) 92% ( biến đổi: dịchY(-12px);) 55%, 75%, 87%, 97%, 100% ( biến đổi: dịchY(0px);) )

Ví dụ 9

Trong ví dụ này, chúng ta sẽ sử dụng hai phần tử mặt nạ để di chuyển chúng từ góc dưới bên phải và góc trên cùng bên trái:

Kiểu di chuột #9

Đọc thêm

Các thành phần mặt nạ sẽ có các giá trị dịch và nguồn gốc chuyển đổi khác nhau. Chúng tôi cũng sẽ chỉ ra rằng một cái được căn chỉnh theo đường viền trên cùng và cái còn lại ở dưới cùng:
.view-ninth .mask-1,.view-ninth .mask-2( màu nền: rgba(0,0,0,0.5); chiều cao: 361px; chiều rộng: 361px; nền: rgba(119,0,36 ,0,5); độ mờ: 1; chuyển tiếp: tất cả 0,3 giây dễ dàng ra vào 0,6 giây; ) .view-ninth .mask-1 ( trái: tự động; phải: 0px; biến đổi: xoay (56,5deg) dịchX(-180px ); nguồn gốc biến đổi: 100% 0%; ) .view-ninth .mask-2 ( trên cùng: tự động; dưới cùng: 0px; biến đổi: xoay (56,5deg) dịchX (180px); nguồn gốc biến đổi: 0% 100%; ) .view-ninth .content( nền: rgba(0,0,0,0.9); chiều cao: 0px; độ mờ: 0,5; chiều rộng: 361px; tràn: ẩn; biến đổi: xoay (-33.5deg) dịch (-112px, 166px); nguồn gốc biến đổi: 0% 100%; quá trình chuyển đổi: tất cả 0,4 giây dễ dàng ra vào 0,3 giây; ) .view-ninth h2( nền: trong suốt; lề trên: 5px; viền dưới: 1px rắn rgba( 255,255,255,0.2); .view-thứ chín a.info( display: none; )
Khi di chuột, chúng ta sẽ làm cho nội dung xuất hiện như thể từ dưới hai thành phần mặt nạ di chuyển về phía giữa:
.view-ninth:hover .content( chiều cao: 120px; chiều rộng: 300px; độ mờ: 0,9; trên cùng: 40px; biến đổi: xoay(0deg) dịch(0px,0px); ) .view-ninth:hover .mask-1, .view-ninth:hover .mask-2( transition-delay: 0s; ) .view-ninth:hover .mask-1( biến đổi: xoay(56.5deg) TranslateX(1px); ) .view-ninth:hover .mask -2 ( biến đổi: xoay(56.5deg) dịchX(-1px); )
Chúng tôi đã định cấu hình độ trễ chuyển tiếp cho các thành phần mặt nạ để khi chúng tôi di chuột, quá trình chuyển đổi diễn ra ngay lập tức nhưng khi chuột di chuyển ra xa sẽ có độ trễ lâu hơn.

Ví dụ 10

Trong ví dụ trước, chúng ta sẽ phóng to hình ảnh rồi ẩn nó đi, đưa mô tả lên phía trước. Chúng ta có thể thực hiện điều này bằng cách sử dụng biến đổi tỷ lệ và điều chỉnh mức độ trong suốt:
.view-tenth img ( Transform:scaleY(1); transition: all 0.7s easy-in-out; ) .view-tenth .mask ( Background-color: rgba(255, 231, 179, 0.3); transition: all 0,5 giây tuyến tính; độ mờ: 0; ) .view-tenth h2( border-bottom: 1px Solid rgba(0, 0, 0, 0.3); nền: trong suốt; lề: 20px 40px 0px 40px; biến đổi: tỷ lệ (0); màu: #333; chuyển tiếp: tất cả 0,5 giây tuyến tính; độ mờ: 0; ) .view-thứ mười p ( màu: #333; độ mờ: 0; biến đổi: tỷ lệ (0); chuyển tiếp: tất cả 0,5 giây tuyến tính; ) .view- a.info thứ mười ( opacity: 0; biến đổi: tỉ lệ (0); chuyển tiếp: tất cả tuyến tính 0,5 giây; )
Khi di chuột, chúng ta chỉ cần chia tỷ lệ hình ảnh, nhưng tại sao lại ẩn nó bằng cách giảm độ trong suốt của nó xuống 0:
.view-tenth:hover img ( Transform:scale(10); opacity: 0; ) .view-tenth:hover .mask ( opacity: 1; ) .view-tenth:hover h2, .view-tenth:hover p, .view-thứ mười:hover a.info( biến đổi: tỉ lệ (1); độ mờ: 1; )

Phần kết luận
CSS3 thực sự có tiềm năng lớn để tạo ra những hiệu ứng đẹp mắt. Hy vọng rằng chúng ta sẽ sớm tránh được việc sử dụng JavaScript để tạo các hiệu ứng đơn giản và dựa 100% vào CSS trong tất cả các trình duyệt.

Tôi hy vọng bạn thích những thử nghiệm này, nhưng trên hết tôi hy vọng chúng có thể truyền cảm hứng cho bạn để tạo ra những hiệu ứng của riêng mình.

tái bút Bài viết này là sự tiếp nối hợp lý của bài viết từ

Thẻ:

  • css3
  • các hiệu ứng
  • chuyển tiếp
  • dịch
Thêm thẻ