簡單記錄 -慕課網- 步驟一：抖音風格字體效果
案例：抖音風格的字體特效。
實現這個
需要設置
- 網頁背景顏色
- 字體顏色
- 字體大小
- 文本陰影
重點介紹如何設置文本陰影
CSS的文本陰影text-shadow屬性
-
無擴散的陰影：text-shadow： 水平偏移量 垂直偏移量 顏色；例如：text-shadow: -1px -3px #ff00de
三個參數 陰影顏色 水平偏移量 垂直偏移量
-
擴散陰影 ：text-shadow: 水平偏移量 垂直偏移量 模糊半徑 顏色 ; 例如：text-shadow: 0 0 20px #2addfd ;
模糊半徑如果沒有指定數值，則默認爲0，值越大，模糊半徑越大，陰影也就越大越淡。
text-shadow: -1px -3px #ff00de
第一個參數水平偏移量，負數代表水平向左偏移 ，正數代表水平向右偏移 0px就是不偏移，這裏-1px就是水平向左偏移1px。
第一個參數垂直偏移量，負數代表水平向上偏移 ，正數代表水平向下偏移 0px就是不偏移。這裏-3px就是水平向上偏移3px。
實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抖音風格字體效果</title>
<style>
body{
background-color:gray;
}
h1{
font-size:32px;
color:white;
text-shadow: red -1px -3px;
}
h2{
font-size:64px;
color:white;
text-shadow:#ff00de -2px -4px , #2addfd 4px 0px;
}
h3{
font-size:32px;
color:white;
text-shadow:#ff00de -1px -3px ;
}
h4{
font-size:64px;
color:white;
text-shadow:#ff00de -1px -3px , 0 0 20px #2addfd ;
}
h5{
font-size:64px;
color:white;
text-shadow: 0 0 20px #2addfd ;
}
</style>
</head>
<body>
<h1>落霞與孤鶩齊飛 </h1>
<h2>秋水共長天一色</h2>
<h3>老當益壯，寧移白首之心？</h3>
<h4>窮且益堅，不墜青雲之志。</h4>
<h5>你好呀你好呀你好呀</h5>
</body>
</html>
效果：
