Home-theater-designers
Hiệu ứng di chuột hình ảnh có thể tăng thêm mức độ bóng bẩy cho trang web của bạn. Chúng tạo ra hiệu ứng mượt mà, làm cho thư viện hình ảnh hoặc băng chuyền dễ điều hướng hơn. Phần tốt nhất là bạn có thể tạo các hiệu ứng này chỉ bằng CSS và không cần JavaScript.
Bạn có thể tạo các kiểu hoạt ảnh khác nhau trên hình ảnh của mình. Chúng bao gồm làm mờ hoặc phóng to nền, mờ dần hoặc trượt trong văn bản và thay đổi màu nền.
TẠO VIDEO TRONG NGÀY CUỘN ĐỂ TIẾP TỤC VỚI NỘI DUNG
Tạo HTML cho
Bắt đầu bằng cách tạo một index.html bên trong một thư mục trống trên máy tính của bạn, sau đó mở tệp bằng trình soạn thảo văn bản. Bên trong tệp, tạo khung HTML và thêm đánh dấu sau vào bên trong phần thân mở và thẻ phần thân đóng:
<div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
Đây là một bộ chứa lưới có bốn trình bao bọc hình ảnh. Các phần tử div với trình bao bọc hình ảnh lớp đóng vai trò là trình bao bọc cho hình ảnh và văn bản tương ứng của nó. Hình ảnh và nội dung của mỗi phần có một tập hợp các lớp duy nhất được thêm vào.
Bên trong style sheet, bạn sẽ nhắm mục tiêu các phần tử này theo tên lớp của chúng và áp dụng các kiểu dáng và hiệu ứng hoạt hình khác nhau. Văn bản sẽ không hiển thị theo mặc định; bạn sẽ chỉ hiển thị nó khi bạn di chuột qua trình bao bọc hình ảnh và hình ảnh sẽ trải qua các hiệu ứng khác nhau trong quá trình này.
Thêm CSS cơ bản
Bây giờ bạn đã tạo HTML, đã đến lúc tạo kiểu cho nó bằng CSS. Tạo một phong cách.css tệp và liên kết tới biểu định kiểu này từ tệp HTML của bạn, bên trong <đầu> phần:
<link rel="stylesheet" href="style.css">
bên trong của bạn phong cách.css tệp, điều đầu tiên bạn cần làm là đặt lại lề trên phần thân thành 0 và đặt một số lề dưới:
body {
margin: 0;
margin-bottom: 20rem;
}
Tiếp theo, bạn cần biến thùng chứa ngoài cùng thành Lưới CSS mà bạn có thể sử dụng để bố trí các phần tử theo hai chiều . Đoạn mã sau tạo một lưới có bao nhiêu cột hoặc hàng phù hợp. Kích thước tối thiểu của mỗi cột là 300px và kích thước tối đa là 1 phần của vùng chứa:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Vì bạn muốn định vị văn bản tương ứng với vùng chứa của nó, nên bạn cần đặt vị trí tương ứng với trình bao bọc hình ảnh:
.image-wrapper {
position: relative;
overflow: hidden;
}
Bước tiếp theo là tạo kiểu cho hình ảnh. Hiển thị hình ảnh dưới dạng một phần tử khối, làm cho nó trải rộng theo chiều rộng của toàn bộ vùng chứa và đặt nó vừa khít ở giữa vùng chứa:
làm thế nào để tôi có thêm ram
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Đối với văn bản, hãy đặt nó ở giữa và đặt màu nền trong suốt, xám nhạt:
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
Lưu tệp CSS và mở index.html trong trình duyệt của bạn. Bạn sẽ tìm thấy một trang tương tự như trang trong hình bên dưới.
cách cài đặt ổ cứng mới trên máy tính xách tay
Đặt Chuyển tiếp và Văn bản
Bây giờ bạn đã áp dụng các kiểu cơ bản cho hình ảnh, bước tiếp theo là thêm một số hoạt ảnh cho chúng. Bắt đầu bằng cách thêm hiệu ứng chuyển tiếp cho cả hình ảnh và văn bản tương ứng của chúng:
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
Điều này có nghĩa là tất cả các hiệu ứng chuyển tiếp (tức là tăng dần, thu phóng và làm mờ) sẽ kéo dài 200 mili giây và có cùng một đường cong thời gian.
Hiệu ứng mờ dần và làm mờ
Phong cách hoạt hình đầu tiên mờ dần trong văn bản. Khi bạn di chuột qua một trình bao bọc hình ảnh cụ thể, nội dung có phai màu lớp sẽ có hiệu ứng này (hoạt hình mờ dần và mờ dần) được áp dụng cho nó. Bạn đạt được điều này bằng cách đặt độ mờ thành 0 và thay đổi thành 1 khi chuột di chuyển trên một trình bao bọc hình ảnh cụ thể:
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Nếu bạn lưu tệp và kiểm tra trình duyệt của mình, bạn sẽ thấy hoạt ảnh giảm dần có hiệu lực. Nhưng bạn cũng có thể nhận thấy rằng văn bản hơi khó đọc (nếu hình ảnh quá rõ và có nhiều độ tương phản). Nhớ lại rằng tất cả các hình ảnh cũng có một tên lớp mơ hồ . Điều này là để làm mờ các hình ảnh để thêm một số độ tương phản rất cần thiết giữa chúng và văn bản:
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Bây giờ khi bạn di chuột qua hình ảnh, bạn có thể thấy rằng nó sẽ bị mờ đi. Bạn có thể tăng giá trị pixel để làm mờ rõ hơn trên hình ảnh, do đó tăng thêm độ tương phản giữa pixel và văn bản.
Thêm hiệu ứng khác
Các hiệu ứng khác là trượt văn bản từ bên trái, phóng to hình ảnh và thêm thang độ xám vào hình ảnh. Đây là mã để đạt được cả ba hiệu ứng:
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
Lưu tệp, sau đó truy cập trình duyệt của bạn và di chuột qua từng hình ảnh. Bạn sẽ thấy các hiệu ứng khác nhau trong hành động.
Để hoàn thành các hiệu ứng trượt vào, bạn có thể tạo thêm ba trình bao bọc hình ảnh, mỗi trình bao chứa một hình ảnh và văn bản. Mỗi đoạn văn bản sẽ có tên lớp trượt lên , trượt xuống, hoặc chếch sang phải . Sau đó, bạn sẽ chuyển giá trị phù hợp vào pixel, em hoặc rem , bên trong biến đổi() chức năng tạo cả ba hiệu ứng.
Lưới CSS và Flexbox
CSS Grid và Flexbox là hai tính năng cho phép bạn tạo bố cục tuyệt vời cho trang web của mình. Bạn có thể tạo hầu như bất kỳ bố cục nào bạn muốn một cách dễ dàng và tùy chỉnh các hàng và cột theo sở thích của bạn. Các cột cũng sẽ được phản hồi theo mặc định. Tìm hiểu khi nào nên sử dụng cái này hơn cái kia sẽ giúp bạn trở thành nhà phát triển CSS một phần trăm hàng đầu.