Làm cách nào để làm mờ văn bản trong CSS?

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ị

Tự mình thử »

---

---

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ị

Tự mình thử »

---

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ị

Tự mình thử »

---

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ị

Tự mình thử »

---

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)

Animate Fade In và Out

---

Làm mờ tất cả

Ví dụ

Tự mình thử »

Làm mờ dần trong CSS là gì?

Làm cách nào để tạo hiệu ứng hoạt hình thay đổi văn bản bằng CSS?

Làm cách nào để thêm hiệu ứng mờ dần trong JavaScript?

Chuyển đổi mờ dần là gì?