手风琴效果 css

Question

有人能告诉我如何在手风琴上实现这种效果吗？

目前我只有这个结果

Answer 1

线性渐变蒙版图像透明度（几种不同的制作方法）。 下面是其中一种方法。 一个有用的来源是： mozilla

 .mask { color: #000; font-size: 20px; mask-image: linear-gradient(to left, rgba(0,0,0,1), transparent); mask-size: 100% 100%; mask-repeat: no-repeat; }

 <div class="mask"><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>