將文本淡入淡出而不妨礙懸停和選擇

Question

我想將文章內容淡化爲白色，以表示可以解鎖更多內容。我可以通過添加一個帶有白色漸變的after元素來實現此目的。

但是，這種技術使得該區域下面的文本難以取捨，並且對懸停效果沒有反應。

我怎樣才能產生類似的效果，並仍然讓用戶與漸變下的內容進行正確的交互？

Answer 1

您可以在:after 更多信息和示例設置pointer-events: none：https://css-tricks.com/almanac/properties/p/pointer-events/

這裏的codepen：http://codepen.io/zakkain/pen/dseHt中使用上述例子。

我還添加了一個小提琴爲例：https://jsfiddle.net/quzoqone/4/

Answer 2

使用這個庫：AnimateCSS

有很多很酷的效果，包括淡入