CSS3文本實現字體漸變雙色變化效果

SS3實現文本字體漸變雙色變化，實現顏色過渡漸變，可以用在首頁展示欄中，增強用戶體驗！下面來看看效果：

實現代碼非常簡單：

識點：for循環語句，字符串方法，進制轉換，this指向問題，變量，數組方法，基本事件處理等。

源碼：

<!doctype html>

<html>

<head>

<title>Document</title>

*{margin:0px;padding:0px; font-family:"微軟雅黑";}

#box{width:400px;

height:450px;

background:#000;

margin:50px auto;

border:5px solid #000;

border-radius:5px;

}

#show{width:100%;

height:190px;

background:#00ccff;

line-height:200px;

font-size:8px;

font-weight:bold;

text-align:center;

border-radius:5px;

}

#font ul{margin-left:10px;

margin-top:30px;}

#font ul li{width:380px;

height:50px;

list-style-type:none;

color:#ddd;}

#font ul li span{display:block;

width:50px;

height:50px;

line-height:50px;

text-align:right;

float:left;

}

#font ul li .roll{width:290px;

height:50px;

float:left;

line-height:50px;

padding-left:30px;

}

#font ul li .roll .move{width:200px;

height:12px;

display:inline-block;

background:#fff;

margin-left:15px;

margin-right:15px;

border-radius:10px;

background-size:cover;

border:1px solid #fff;

position:relative;

}

#font ul li .roll .move .prog{position:absolute;

top:0px;

width:0px;

height:12px;

border-radius:10px 0 0 10px;

background:url("images/slider-bar.png") bottom;}

#font ul li .roll .move .prog .but{width:22px;

height:22px;

position:absolute;

top:-3px;

background:url("images/dot-bg.png") no-repeat;

cursor:pointer;

left:0px;}

</style>

</head>

<body>

<div id="show">云煙好帥啊</div>

<ul>

<li>

<div>

</div>

40px

</div>

</li>

<li>

<div>

</div>

255

</div>

</li>

<li>

<div>

</div>

255

</div>

</li>

<li>

<div>

</div>

255

</div>

</li>

</ul>

</div>

</body>

1.JS主要針對頁面當中的HTML元素以及樣式進行修改，從而得到特效

2.我們一般用JS寫特效，要知道觸發特效的條件是什么

3.促發這個條件的對象是誰

4.寫這個事件里面發生的事情

5.獲取鼠標的移動水平方向的距離

6.this代表當前執行這個事件的對象

(這個事件是誰做的那么這個事件當中的this就是誰)

var oBut = document.getElementsByClassName("but");//通過元素的類名是以一個數組的形式保存

var oFont = document.getElementById("show");//通過ID名獲取元素

var oProg = document.getElementsByClassName("prog");

var width = [0,0,0,0];

var rgb = ["00","00","00"];

for (var i=0;i<oBut.length;i++)//重復執行某一個語句（循環體）限制條件

{

oBut[i].index=i;//自定義一個index屬性保存i

oBut[i].onmousedown = function(e){//鼠標點擊下去

//event事件對象 clientX clientY

var e = e || window.event;//做IE兼容

this.x = e.clientX;//當前對象的屬性去保存這個值(自定義一個x屬性)

var thisIndex = this;//定義一個變量保存this指向對象

var lastLeft = width[this.index];

//console.log("鼠標點擊下去");

document.onmousemove = function(e){//鼠標移動事件

//console.log("鼠標移動事件");

var e = e || window.event;//做IE兼容

width[thisIndex.index] = e.clientX-thisIndex.x+lastLeft;

if (width[thisIndex.index]>180)width[thisIndex.index]=180;

if (width[thisIndex.index]<0)width[thisIndex.index]=0;

oBut[thisIndex.index].style.left = width[thisIndex.index]+"px";

oProg[thisIndex.index].style.width = width[thisIndex.index]+"px";

if (thisIndex.index == 0)

{

oFont.style.fontSize = width[thisIndex.index]/180*40+8+"px";

//駝峰命名法

}else{

var num = parseInt(width[thisIndex.index]/180*255);

/*if (num<16)

{

numStr ="0"+num.toString(16);

}else{

numStr = num.toString(16);

}*/

rgb[thisIndex.index-1] = num<16?"0"+num.toString(16):num.toString(16);

oFont.style.color = "#"+rgb[0]+rgb[1]+rgb[2];

}

document.onmouseup = function(){//鼠標松開事件

//console.log("鼠標松開事件");

this.onmousemove = null;//終止移動事件

this.onmouseup = null;//終止鼠標松開事件

}

</script>

文簡介

點贊 + 關注 + 收藏 = 學會了

IText 是 Fabric.js 提供的一個 可編輯文本 的元素。

要設置文字顏色，可以設置 fill 。

但 fill 會設置所有文字的顏色，如果你只想修改指定文字的顏色，只用 fill 就不是那么容易實現了。

本文要講的就是 設置指定文字的顏色和背景色。

設置文字顏色或背景色，需要分情況討論的：

全文設置
設置指定文字顏色（單行）
設置指定文字顏色（多行）

接下來就將上述情況逐一講解。

起步

<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  // 初始化畫布
  const canvas = new fabric.Canvas('c')

  // 創建文本
  const iText = new fabric.IText('hello world')

  // 將文本添加到畫布里
  canvas.add(iText)
</script>
復制代碼

首先把 Fabric.js 引入，然后初始化畫布。如果對這個概念不太熟的話，可以看看 Fabric.js 從入門到膨脹。

最后通過 new fabric.IText 創建一段文字添加到畫布中。

全文設置

// 省略部分代碼

const iText = new fabric.IText('hello world', {
  fill: 'pink'
})
復制代碼

fill 可以設置文字的填充顏色。在 Fabric.js 里是使用這個屬性設置顏色的，和 css 設置文字顏色使用 color 不一樣~

單行：設置指定文字顏色

const iText = new fabric.IText('hello world', {
  styles: {
    0: {
      1: {
        fill: '#f00' // 文字顏色，#f00是紅色
      }
    }
  }
})
復制代碼

第一次看到上面的代碼時我也覺得有點奇怪，后來仔細看了下才發現這樣設計的用意。

styles 是一個對象。

styles: { // 設置樣式
  0: { // 第1行
    1: { // 第2個字符
      // 要設置的樣式
    }
  }
}
復制代碼

上面這段代碼是這個意思。行號和字符位置都是從0開始算起，有點像數組下標的意思。

我們這個例子只有1行，所以行號是0。

e 的下標是 1 。所以上面的代碼就把 e 設置成紅色了。其他字符還是默認的顏色。

多行：設置指定文字顏色

const iText = new fabric.IText('hello\nworld', {
  styles: { // 設置樣式
    0: { // 第1行
      1: {
        fill: '#f00' // 文字顏色
      }
    },
    1: { // 第2行
      2: {
        fill: 'hotpink'
      }
    }
  }
})
復制代碼

IText 的換行是用 \n 來表達的。

這個例子要 修改第1行第2個字符的文字顏色為紅色，第2行第3個字符為亮粉色 。

從代碼里的注釋應該可以看得懂本次操作。

設置文字背景色

const iText = new fabric.IText('hello world', {
  styles: {
  0: {
    1: {
      textBackgroundColor: 'yellowgreen', // 背景色
    }
  },
})
復制代碼

和設置文字顏色的原理一樣，只是把關鍵字改一改就行。

textBackgroundColor 翻譯成中文就是文本背景色。

代碼倉庫

?Fabric 設置IText指定字符顏色和背景色

整合營銷服務商

CSS3文本實現字體漸變雙色變化效果

文簡介

起步

全文設置

單行：設置指定文字顏色

多行：設置指定文字顏色

設置文字背景色

代碼倉庫

推薦閱讀

您的項目需求