整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁中添加滾動字幕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動字體的設置</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對象
var ctx = canvas1.getContext("2d") // 2.上下文對象（畫筆）
ctx.shadowBlur = 10; // 陰影距離
ctx.shadowColor = "red" // 陰影顏色
ctx.shadowOffsetX = 30 // 陰影偏移
ctx.shadowOffsetY = 30 // 陰影偏移
ctx.font = "150px 楷體"
ctx.fillText("你好！", 20,150)
ctx.fillText("你好！", 20,350)
ctx.strokeText('你好！',23, 153)
ctx.strokeText('你好',23, 553)
canvas繪制文字
var x = 600
setInterval(function(){
if(x > -350){
//清空畫布
ctx.clearRect(0,0,600,600)
ctx.strokeText('你好！',x, 153)
ctx.fillText("你好！", x,350)
ctx.font = "50px 宋體"
ctx.strokeText('每天學習一點點',x, 553)
x -= 3
}else{x=590}
}, 16)
</script>
</body>
</html>
果你需要在網頁上創建標題，或者在網站上改變不同頁面上的文本大小，或段落中的某個特定單詞突出，可以通過使用html命令更改文本大小來做到這一點。但凡上過html培訓學習的人都會很輕輕松學會這個操作，有導師指導，學起來要容易的多。
更改前，先備份
無論什么時候你要更改網頁，無論你只是在html中更改文本大小，還是在添加照片或將背景圖像更改為新模式時，在更改前始終要記住一點：備份你現有的頁面。這將確保如果在更改期間發生錯誤，并且此錯誤導致網頁丟失，則可以恢復到起始位置，然后再試一次。
若要復制網頁，請打開該文件并復制html。然后將頁面html的副本粘貼到一個程序中，比如程序員的記事本，這是一個免費的實用程序，供網頁設計者/程序員使用，用于CSS、html和其他程序。
在更改的操作中，備份是經常要做的事，這一點非常重要，一般你在html培訓學習時，老師都會強調這一點的。
如何在HTML中更改文本大小
首先，找到要更改的一行或多行文本。使用
這個標記
在html中更改文本大小是一個簡單的編碼問題，你可以學會自己做，你也可以使用各種額外的html技巧。通過參加html培訓學習，對html會有更系統更全面的認識，零基礎也能輕松學到有用的知識。
了解更多
馬上我們就要進入下一個階段，也就是HTML和CSS實現前端界面的階段了，想必很多小伙伴都想給自己的頁面加點酷炫的特效，今天，我就給大家整理了一些非常酷炫的文字特效來裝點你的頁面！有些是從網絡上找的，有些是自己寫出來的
這里介紹一點寫這些特效時需要用到的屬性，（帶-webkit-開頭的是只有Safari和Chrome等使用webkit或chromium內核的瀏覽器才可以使用）
這個屬性用于設置文本的填充色，與直接設置顏色（color屬性）不同，它可以設置transparent（透明）
這個屬性用于設置文字的描邊，第一個值寫描邊線的寬度，第二個寫描邊線的顏色
文字陰影，這個屬性由四個部分組成：第一個值寫陰影在x軸上的偏移；第二個值是在y軸上的偏移；第三個值是模糊程度（可以寫0~？）值越大，越模糊，為0時不模糊；第四個值是陰影顏色。與box-shadow基本一致
注意：這四個值直接不需要逗號分隔，它們四個作為一個整體參數。同時也可以寫多個參數用逗號隔開來實現更強的效果（下方有多個效果都運用到了這個技巧）
將背景按照設定的參數裁切，一般書寫text（即按照文本的樣式裁切，僅保留文本的部分）然后將文本設為透明（webkit-text-fill-color屬性）就能實現漸變色文字等
下面就是一些字體實例了
.loukong{
/* 設置文字為透明，設置文本描邊*/
background-color: #00c4ff;
-webkit-text-fill-color: transparent;
-webkit-text-stroke:1px #000;
} .liti{
/* 文字左上設置多層淺色陰影，右下設置多層暗色陰影，文字色同背景色 */
background-color: #d2d500;
color: #d2d500;
text-shadow: -1px -1px 0px #e6e600,-2px -2px 0px #e6e600,
-3px -3px 0px #e6e600,1px 1px 0px #bfbf00,2px 2px 0px #bfbf00,3px 3px 0px #bfbf00;
} .nihong{
/* 深色底色，淺色文字，多層淺色文字陰影，彌散大 */
background-color: darkgray;
color: white;
text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;
} 英文或者筆畫稀疏的文本比較適合，筆畫多看起來會不太好
.chongdie{
/* 兩層背景，一層與被背景色相同，一層與文字色相同 */
background-color: gray;
color: #eee;
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
} .huanse{
/* 兩層背景，沒啥技巧 */
background-color: darkgray;
color: white;
text-shadow: 1px 1px 0px #0000FF,2px 2px 0px #0000FF,-1px -1px 0px #E31B4E,-2px -2px 0px #E31B4E;
} .fangsheng{
/* 要把陰影與大小配合好，一般來說大小都是偏大時采用 */
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
text-transform: uppercase;/* 全開大寫 */
font-size: 92px;
color: #f1ebe5;
text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
font-weight: bold;
letter-spacing: -4px;
background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
} 因為需要用到背景裁切（-webkit-background-clip），所以需要再嵌套一個背景div
.jianbian{
background-color: #009195;
}
.jianbian-inner{
background: linear-gradient(90deg,#f88,#88f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* -webkit-text-stroke: 1px #000000; */
} 以上就是全部內容了，靈活運用css的屬性，就能創造出很多你想得到的和想都想不到的特效，甚至一些連寫腳本都很難實現的特效，所以，努力探索css吧，沖沖沖！
轉自簡書：喬一丁_2020強化班
原文鏈接：https://www.jianshu.com/p/b7fd3cf53924
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
