Css 漸變文字效果

2024-09-05 12:21:18

字體：大中小

來源：轉載

供稿：網友

用CSS實現的漸變文字特效，漸變的效果源于一張GIF圖片，用CSS去控制文字顏色的透明，并加載漸變圖片，代碼是從老外網站挖過來的，很實用吧？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>Css 漸變文字</title><style>body {	margin:0;	padding:2em 4em;	background:#fff;	font:90% Arial, Helvetica, sans-serif;	color:#666;	line-height:180%;}h1 {	font-size:300%;	line-height:1em;	color:#8bb544;	font-weight:bold;	text-transform:uppercase;	letter-spacing:-.05em;	position:relative;	}h2 {	font-size:260%;	color:#0079b6;	font-weight:bold;	letter-spacing:-.05em;	position:relative;	margin:.6em 0;	padding-top:1px; 	width:100%;}h3 {	font-size:240%;	color:#7365a0;	font-weight:bold;	text-transform:uppercase;	letter-spacing:-.05em;	padding-top:3px;	position:relative;	margin:.6em 0;	width:100%;}h4 {	font-size:220%;	color:#dc5b24;	font-weight:normal;	letter-spacing:-.05em;	position:relative;	margin:.6em 0;	padding-top:1px;	width:100%;}h1 span, h2 span, h3 span, h4 span{	position:absolute;	display:block;	top:0;	left:0;	height:100%;	width:100%;	background:url(/jscss/demoimg/200902/gradient_1.png) repeat-x;}h1 span, h3 span{background:url(/jscss/demoimg/200902/gradient_2.png) repeat-x;}* html h1 span, * html h3 span{	background-color:#fff;	back/ground-color:transparent;	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/200902/gradient_2.png", sizingMethod="scale");}* html h2 span, * html h4 span{background-color:#fff;back/ground-color:transparent;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/jscss/demoimg/200902/gradient_1.png", sizingMethod="scale");}</style></head><body><h1>CSS漸變文字<span></span></h1><h2>恰似你的溫柔<span></span></h2><h4>老外那里搞過來的<span></span></h4><h5>IE6/7、FF2兼容<span></span></h5></body></html>

上一篇：Wingdings文鼎特殊字符組合的桌面圖標

下一篇：在一行范圍內無間斷的文字滾動代碼