CSS3淡出文本

Question

我一直试图让我的文字淡出.我已经尝试了一些我在互联网上找到的代码,但它们似乎只适用于块元素.
我如何使其工作？
这是我想要得到的:

哦,我不想要Internet Explorer支持.

最诚挚的问候,MarioErmando

Answer 1

没关系,我找到了自己的解决方案.

blablablabla<span class="readmore">blablablabla</span>

.readmore {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
}

不幸的是,只适用于webkit.

Answer 2

这是小提琴例子,你可以试试这个.

HTML

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum massa     nec mi porta ut dictum dolor consectetur. Nunc imperdiet fermentum mauris, aliquam rhoncus magna suscipit eget. Cras neque velit, posuere ut pulvinar eu, faucibus sit amet tellus. Nullam sed orci tempus risus commodo commodo.</li>
</ul>

CSS

body {
font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
font-size: 13px;
 }

 ul { margin: 20px; padding: 0; }

 li {
position: relative;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
 }
 li:after {
content: "";
pointer-events: none;
position: absolute;
width: 100px;
height: 100%;
top: 0; right: 0;

background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 }

 /*
 This piece of code works great too, but only on Webkit Browsers!
 li {
color: white;
position: relative;
overflow: hidden;
white-space: nowrap;
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
 }
 */