|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSS3背景圖片填充文字【實例演示/源碼下載】
作者:admin 時間:2022-3-17 16:40:7 瀏覽:本文介紹CSS3如何使用背景圖片來填充文字，讓文字變得更酷。
實例
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: auto;
width: 800px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 150px;
font-weight: bold;
color:transparent;
background: url(1.jpg);
-webkit-background-clip: text;
}
</style>
</head>
<body>
<div>
卡卡網(wǎng)
</div>
<div>
WebKaka
</div>
</body>
</html>
代碼解釋
HTML文字使用一個DIV標簽作為盒子。
CSS中使用了-webkit-background-clip: text; 和 color:transparent;，這兩行關(guān)鍵的語句。
-webkit-background-clip: text; 的作用是把背景裁剪到文字，color:transparent; 是把文字顏色設(shè)為透明，這樣文字顏色就是圖片背景的裁剪部分。
把文字背景做成動畫效果
利用上面的案例，稍加改動，我們就可以把文字背景做成動畫效果。
完整HTML代碼
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: auto;
width: 800px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 150px;
font-weight: bold;
color: transparent;
background: url(1.jpg);
-webkit-background-clip: text;
animation: animate 8s ease 500ms infinite;
}
/* 定義關(guān)鍵幀 */
@keyframes animate {
from {
background-size: 50%;
}
to {
background-size: 20%;
}
</style>
</head>
<body>
<div> 卡卡網(wǎng) </div>
<div> WebKaka </div>
</body>
</html>
代碼解釋
文字出現(xiàn)動畫效果，是因為背景圖片在移動，實現(xiàn)方法是使用css3的animation動畫屬性，本實例代碼為 animation: animate 8s ease 500ms infinite; ，另外要加上對應(yīng)的一個動畫集 @keyframes animate {} 。
漸變文字效果
根據(jù)這種方法我們也可以做成漸變文字效果。
實例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: auto;
width: 800px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 150px;
font-weight: bold;
color: transparent;
background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
background-size: 200% 100%;
background-position: 0 0;
-webkit-background-clip: text;
animation: bgposition 2s infinite linear alternate;
}
@keyframes bgposition {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div>
WebKaka
</div>
</body>
</html>
代碼解釋
首先CSS使用background: linear-gradient()設(shè)置文字的背景是線性漸變顏色(靜態(tài))。
然后使用animation動畫屬性，設(shè)置背景位置（background-position）向右移動。
這樣就做成了線性漸變效果的文字了。
相關(guān)文章
相關(guān)文章
x
- 站長推薦
