Văn bản mờ dần CSS

Sự miêu tả

Hình ảnh xuất hiện hoặc dần dần xuất hiện hoặc biến mất khỏi tầm nhìn hoặc hợp nhất thành một ảnh khác

cú pháp

@keyframes fadeOut {
   0% {opacity: 1;}
   100% {opacity: 0;} 
} 

Thông số

• Chuyển đổi - Chuyển đổi áp dụng cho chuyển đổi 2d và 3d thành một phần tử

• Độ mờ - Độ mờ áp dụng cho một phần tử để tạo độ mờ

Thí dụ

   
      
   

   
   
      
      Reload page
      
      
      
   

đầu ra

Nó sẽ tạo ra kết quả sau -

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 chiều cao bởi thuộc tính thích hợp max-height với nó là ___________ đượ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