文字流光效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字流光效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.masked h4 {
display:block;
width:600px;
height:900px;
/*漸變背景，此處為能無縫拼接的漸變 即0~100%*/ /*linear-gradient(線性漸變)*/
background-image:-webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
color:transparent;
/*文字填充色為透明*/
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
/* background-clip 規定背景的繪製區域：*/ /*背景剪裁為文字，相當於用背景填充文字 CSS3新屬性*/
-webkit-background-size:200% 100%;
/*背景圖片向水平方向擴大一倍，這樣background-position才有移動與變化的空間*/
background-size:200% 100%;
/* 動畫 */
-webkit-animation:masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position:0 0;
/*background-position 屬性設定背景影象的起始位置。*/
}
100% {
background-position:-100% 0;
}
}@-webkit-keyframes masked-animation {
0% {
background-position:0 0;
}
100% {
background-position:-100% 0;
}
}</style>
</head>
<body>
<div class="masked">
<h4>
一封信兩年未都沒動筆<br> 三個字過了幾個四季
<br> 你是有多想逃避
<br> 來不及問問你
<br> 我已經錯過相愛的日期
<br> 那天你
<br> 消失在人海里
<br> 你的背影
<br> 沉默的讓人恐懼
<br> 你說的那些問題
<br> 我回答得很堅定
<br> 偏偏那個時候我最想你
<br> 我不曾愛過你
<br> 我自己騙自己
<br> 已經給你寫了信
<br> 又被我丟進海里
<br> 我不曾愛過你
<br> 我自己騙自己
<br> 明明覺得自己很冷靜
<br> 卻還掉入我自己的陷阱
<br> 那天你
<br> 消失在人海里
<br> 你的背影沉默的讓人恐懼
<br> 你說的那些問題
<br> 我回答的很堅定
<br> 偏偏那個時候我最想你
<br> 我不曾愛過你
<br> 我自己騙自己
<br> 已經給你寫了信
<br> 又被我丟進海里
<br> 我不曾愛過你
<br> 我自己騙自己
<br> 明明覺得自己很冷靜
<br> 卻還掉入我自己的陷阱
<br> 一個人的夜裡
<br> 想的太多
<br> 離開我你的生活
<br> 不再寂寞
<br> 我不曾愛過你
<br> 我自己騙自己
<br> 已經給你寫了信
<br> 又被我丟進海里
<br> 我不曾愛過你
<br> 我自己騙自己
<br> 已經給你寫了信
<br> 又被我丟進海里
<br> 我不曾愛過你
<br> 我自己騙自己
<br> 卻還掉入我自己的陷阱
</h4>
</div>
<script>
</script>
</body>
</html>