Văn bản mờ dần ở dưới cùng và có liên kết “Thêm…”. Văn bản mờ dần không có gì mới ở đây. Tôi đã có một bản demo cho điều đó từ lâu, sử dụng tệp PNG trong suốt được đặt trên văn bản. Nhưng vì đây là một ý tưởng hơi khác và thời thế đang thay đổi nên chúng ta có thể tiến bộ hơn một chút với ý tưởng này
Giả sử những hộp văn bản nhỏ này được sử dụng trong một thanh bên, vì vậy đánh dấu HTML của chúng ta sẽ là một div với lớp sidebar-box
. Div này có thể chứa bất kỳ số lượng phần tử đoạn nào, phần cuối cùng sẽ có tên lớp là read-more
chứa nút liên kết
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Read More
Hộp sẽ bị giới hạn về chiều cao bởi thuộc tính thích hợp max-height
với nó là overflow
được đặt thành ẩn. Chúng tôi cũng sẽ sử dụng định vị tương đối vì chúng tôi sẽ cần điều đó để sử dụng định vị tuyệt đối trên đoạn đọc thêm, được khóa ở cuối hộp và sử dụng các chuyển màu CSS3 để làm mờ văn bản
.sidebar-box {
max-height: 120px;
position: relative;
overflow: hidden;
}
.sidebar-box .read-more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0; padding: 30px 0;
/* "transparent" only works here because == rgba[0,0,0,0] */
background-image: linear-gradient[to bottom, transparent, black];
}
Điều đó mang lại cho chúng ta
“Tiết lộ” với jQuery
Cách đơn giản nhất để thực hiện công việc này là xóa CSS có chiều cao tối đa khỏi hộp thanh bên khi nhấp chuột. Điều đó sẽ cho phép nó ngay lập tức mở rộng xuống chiều cao tự nhiên của tất cả các đoạn chứa trong đó. Về mặt lý thuyết, bạn có thể làm điều này với CSS3 và. mục tiêu, nhưng đó là tạm thời và sẽ gây ra hiện tượng nhảy xuống trang. Chúng ta có thể làm cho nó thanh lịch hơn bằng cách sử dụng JavaScript và các hoạt ảnh dễ dàng của jQuery
var $el, $ps, $up, totalHeight;
$[".sidebar-box .button"].click[function[] {
totalHeight = 0
$el = $[this];
$p = $el.parent[];
$up = $p.parent[];
$ps = $up.find["p:not['.read-more']"];
// measure how tall inside should be by adding together heights of all inside paragraphs [except read-more paragraph]
$ps.each[function[] {
totalHeight += $[this].outerHeight[];
}];
$up
.css[{
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height[],
"max-height": 9999
}]
.animate[{
"height": totalHeight
}];
// fade out read-more
$p.fadeOut[];
// prevent jump-down
return false;
}];
Vì vậy, bằng tiếng Anh thuần túy, khi một nút được nhấp vào bên trong hộp thanh bên, hãy tìm tất cả những người chơi có liên quan có liên quan [các phần tử gốc và tương tự], đo chiều cao lý tưởng mới, tạo hiệu ứng cho chiều cao mới đó và xóa nút
Xem bản trình diễn Tải tệp xuống
Ghi chú nhanh về Độ trong suốt & Độ dốc
Tôi đã có một số người phải vò đầu bứt tai khi cố gắng tìm ra một vấn đề kỳ lạ bằng cách sử dụng các chuyển màu CSS3 và làm mờ dần từ “trong suốt” thành màu lục giác thông thường. Có vẻ như màu sắc đang nhân lên trên nền. Điều đang thực sự xảy ra là từ “trong suốt” thực ra chỉ được ánh xạ tới “rgba[0, 0, 0, 0]” có nghĩa là “màu đen hoàn toàn trong suốt. ” Vì vậy, khi tạo gradient, các màu trung gian được trộn với màu đen không hoàn toàn trong suốt. Để khắc phục điều này, bạn sẽ cần sử dụng màu RGBa ở cả phần đầu và màu nhạt dần, ngay cả khi màu đó hoàn toàn trong suốt. Ví dụ, để màu đỏ nhạt dần từ đỏ sang trong suốt
background-image: -webkit-gradient[
linear,
left top,
left bottom,
color-stop[0, rgba[255, 0, 0, 0]],
color-stop[1, rgba[255, 0, 0, 100]]];
Và đừng quên tất cả các cú pháp gradient khác. Làm ơn CSS3. là một tài nguyên tuyệt vời để nhận các cú pháp CSS3 cập nhật nhanh chóng
Trên
Dưới
Trái
Phải
Mờ dần
Zoom
Spin
W3. Các lớp hoạt hình CSS
W3. CSS cung cấp các lớp sau cho hoạt ảnh
ClassDefinesw3-animate-topSlide trong một phần tử từ trên cùng [-300px đến 0]w3-animate-bottomSlides trong một phần tử từ dưới cùng [-300px đến 0]w3-animate-leftSlide trong một phần tử từ bên trái [-300px đến 0] . 8 giâyw3-animate-zoomTạo hiệu ứng cho một phần tử từ 0 đến 100% trong sizew3-animate-fading Tạo hiệu ứng cho độ mờ của một phần tử từ 0 đến 1 và 1 thành 0 [mờ dần + mờ dần]w3-spinQuay một phần tử 360 độHoạt hình hàng đầu
Lớp w3-animate-top trượt trong một phần tử từ trên cùng [từ -300px đến 0]
Ví dụ
Hoạt hình thật thú vị
Hoạt hình dưới cùng
Lớp w3-animate-bottom trượt trong một phần tử từ dưới lên [từ -300px đến 0]
Ví dụ
Hoạt hình thật thú vị
Hoạt hình bên trái
Lớp w3-animate-left trượt trong một phần tử từ bên trái [-300px đến 0]
Ví dụ
Hoạt hình thật thú vị
Animate phải
Lớp w3-animate-right trượt trong một phần tử từ bên phải [-300px đến 0]
Ví dụ
Hoạt hình thật thú vị
mờ dần trong các yếu tố
Lớp w3-animate-opacity tạo hoạt ảnh cho độ mờ của phần tử từ 0 đến 1 trong 0. 8 giây
Làm mờ một phần tử với lớp w3-animate-opacity
Phóng to các phần tử
Lớp w3-animate-zoom tạo hoạt ảnh cho một phần tử có kích thước từ 0 đến 100%
Phóng to một phần tử với lớp w3-animate-zoom
Yếu tố quay
Lớp w3-spin quay một phần tử 360 độ
mờ dần vô tận
Lớp w3-animate-fading làm mờ dần một phần tử cứ sau 10 giây [liên tục]