『CSS「background-clip」を使って、背景画像をテキストで切り抜き』の（３）です。「background-clip:text」で、CSSアニメーションで動かす背景画像をテキストで切り抜きます。

サンプルのテキスト「WEB受注システム 百万石」にhoverすると、派手なイルミネーションのようなCSSアニメーションが発動します。

なお、（１）、（２）と同様にweb-kitブラウザ用ですので、Safari、Google Chrom、Lunascape、Sleipnirなどでご覧下さい。

htmlソース

<div id="upper">
	<p>WEB受注システム<br><span class="big">百万石</span></p>
</div>

CSSソース

div#upper p {
	background:url("images/toon4.png") repeat;
	background-size:45%;
	text-align: center;
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.4;
	font-weight:bold;
	font-size: 52px;
	font-weight: bold;
	-webkit-background-clip: text;
	color:rgba(55, 55, 55, 1);
	}
div#upper p:hover{
	filter: invert(100%);
	-webkit-text-fill-color: transparent;
	animation: anime 1s infinite steps(8);
	}
@keyframes anime {  
	from{
		background-position: 0 0;
		filter: hue-rotate(10deg) ;
		filter: invert(100%);
		} 
	to {
		background-position: -800px 100px;
		filter: hue-rotate(10deg) ;
		filter: invert(100%);
		}  
	}