1. 首頁
  2. 問答
  3. css文字漸變

css文字漸變

2011-12-05 134 views
11

我已經小心環顧四周，找不到任何關於此的內容。css文字漸變

如果我有一段文字，有沒有辦法，也許用CSS3逐漸改變文本的顏色，因爲它下降到頁面？而不是漸變的方式，因爲它只是對文字而不是整段文字。

所以我想要一些文本開始白色，然後淡入黑色，因爲它到達段落的結尾。

我真的不確定它可以完成...也許有一個Java腳本可以做到這一點。

謝謝。

來源

2011-12-05 ragebunny

回答

9

你可以做到這一點使用CSS，但它只能在WebKit瀏覽器（Chrome和Safari）工作：http://jsfiddle.net/joshnh/DphXz/

來源

2011-12-05 11:49:08 joshnh

+1

多數民衆贊成在驚人的....但這樣的恥辱其唯一的webkit瀏覽器....我想知道是否有任何工作，IE和Firefox！感謝那。 – ragebunny

+0

希望其他瀏覽器將開始實現這些功能，但在此之前它只是不幸的webkit。 – joshnh

1

我能夠做的純CSS類似的東西，但是，它並沒有在IE瀏覽器，因爲它不支持混合，混合模式的CSS屬性： http://caniuse.com/#feat=css-mixblendmode

代碼片段在下面。希望它能幫助別人。

<html> 
<head> 
<style> 
.gradient { 
    position: relative; 
    content: ''; 
    display: block; 
    width: 260px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1))); 
    background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background: -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:  -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:  -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:   linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
} 
.gradient p { 
    color: #000; 
    background: #fff; 
    mix-blend-mode: lighten; 
} 
</style> 
</head> 
<body> 
    <div class="gradient"> 
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
    </div> 
</body> 
</html>

來源

2016-02-09 11:14:25

相關問題

 相關問題