|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
3行CSS代碼實現(xiàn)文字鏤空(動畫)效果【演示/源碼下載】
作者:admin 時間:2022-3-15 0:6:29 瀏覽:本文介紹如何用圖片填充文字顏色，文字顏色用圖片來填充，即是所說的文字鏤空效果。
文字鏤空效果
實例僅用CSS就能實現(xiàn)，且只有3行CSS代碼。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3行CSS代碼實現(xiàn)用圖片填充文字顏色</title>
<style>
div{
font-family:"Arial Black", Helvetica, sans-serif, "宋體";
font-size:65px;
color: transparent;
background-image: url("1.jpg");
background-clip: text;
/* 谷歌瀏覽器適配 */
-webkit-background-clip: text;
}
</style>
</head>
<body>
<div>卡卡網(wǎng) webkaka.com</div>
</body>
</html>
代碼分析
color: transparent;設(shè)置文字顏色為透明。
background-image: url("1.jpg");設(shè)置文字背景圖片。
background-clip: text; 和 -webkit-background-clip: text; 意思是以盒子內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字之外的區(qū)域都將被裁剪掉。
文字鏤空動畫效果
我們還可以把文字鏤空做成動畫效果
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字鏤空效果</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #55efc4;
}
h1.power {
width: 100%;
/* 沒有做適配，直接按照全屏來的 也可以寫px值 ?? */
font-size: 150px;
font-family:"Arial Black", Helvetica, sans-serif, "宋體";
text-align: center;
color: transparent;
/* 文字間距 */
letter-spacing: 20px;
margin: 0;
/* 居中h1標簽 */
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
/* 背景圖片導(dǎo)入 */
background: url("1.jpg") repeat center center;
/* 背景裁切，值為text時 會有文字的鏤空效果（前提是文字透明或者半透明，能直觀看出來） */
-webkit-background-clip: text;
background-size: 40%;
/* 動畫執(zhí)行 */
animation: animate 8s ease 500ms infinite;
}
/* 定義關(guān)鍵幀 */
@keyframes animate {
from {
background-size: 50%;
}
to {
background-size: 10%;
}
}
</style>
</head>
<body>
<h1 class="power">webkaka</h1>
</body>
</html>
代碼分析
本實例的文字鏤空出現(xiàn)了動畫效果是因為使用了下面的代碼：
animation: animate 8s ease 500ms infinite;
/* 定義關(guān)鍵幀 */
@keyframes animate {
from {
background-size: 50%;
}
to {
background-size: 10%;
}
}
animation是css3的一個動畫屬性，其語法是：
animation: 動畫名稱 運動時間 運動曲線 等待時間 播放次數(shù)(無限播放) 是否反向播放
本實例里，動畫名稱是animate，運動時間是8s，運動曲線是ease(緩慢移動)，等待時間是500ms，播放次數(shù)是infinite(無限)。
相關(guān)文章
x
- 站長推薦
