css3如何實現文字顏色漸變

這篇文章給大家分享的是有關css3如何實現文字顏色漸變的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　css3文字顏色漸變的方法一：通過css3的動畫屬性實現css文字動態顏色漸變

　　<h3>文字顏色漸變</h3>

　　h3{

　　height:60px;

　　color:#f35626;

　　background:coral;

　　background-image:-webkit-linear-gradient(45deg,#f35626,#feab3a);

　　-webkit-background-clip:text;

　　-webkit-text-fill-color:transparent;

　　-webkit-animation:hue6sinfinitelinear;

　　}

　　@-webkit-keyframeshue{

　　from{

　　-webkit-filter:hue-rotate(0deg);

　　}

　　to{

　　-webkit-filter:hue-rotate(-360deg);

　　}

　　}

　　css3文字顏色漸變的方法二：通過mask-image屬性實現文字顏色漸變的靜態效果

　　<h3class="text-gradient"data-text="文字顏色漸變">文字顏色漸變</h3>

　　.text-gradient{

　　display:inline-block;

　　font-family:'微軟雅黑';

　　font-size:5em;

　　position:relative;

　　}

　　.text-gradient[data-text]::after{

　　content:attr(data-text);

　　color:green;

　　position:absolute;

　　left:0;

　　z-index:2;

　　-webkit-mask-image:-webkit-gradient(linear,00,0bottom,from(#ff0000),to(rgba(0,0,255,0)));

　　}

　　從CSS代碼可以看出，效果的實現除了“content內容生成技術”以外，主要是使用了mask-image屬性。

　　css3文字顏色漸變的方法三：通過background-clip+text-fill-color屬性來實現文字顏色漸變的靜態效果。

　　<h3class="text-gradient">文字顏色漸變效果</h3>

　　.text-gradient{

　　display:inline-block;

　　color:green;

　　font-size:5em;

　　font-family:'微軟雅黑';

　　background-image:-webkit-gradient(linear,00,0bottom,from(rgba(0,128,0,1)),to(rgba(51,51,51,1)));

　　-webkit-background-clip:text;

　　-webkit-text-fill-color:transparent;

　　};

感謝各位的閱讀！關于“css3如何實現文字顏色漸變”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！