<style>
h2{
line-height: 2;
font:35px '华文新魏','微软雅黑' ;
position: relative;
}
h2 span{
position: absolute;
width: 100%;
height: 23px;
}
h2.h20{
background-color: #dd93c2;
}
h2.h21{
background-color: #c5dd86;
}
h2.h21 span{
background: url(image/gradient-white.png) repeat-x;
}
h2.h22,h2.h23,h2.h24,h2.h25,h2.h26{
background-color: #000;
color:#fff;
}
h2.h22 span{
top:23px;
background: url(image/gradient-dark.png) repeat-x;
}
h2.h23 span{
height:46px;
background: url(image/gradient-shine.png) repeat-x;
}
h2.h24 span{
top: 23px;
background: url(image/gradient-dark-stripe.png) repeat-x;
}
h2.h25 span{
top: 23px;
background: url(image/gradient-dark-stripe-hz.png) repeat-x;
}
h2.h26 span{
height:46px;
background: url(image/pattern-zebra.png) repeat-x;
}
</style>
</head>
<body>
<h2 class="h20">
<span id="css"></span>
CSS拼接实现的高光文字效果
</h2>
<h2 class="h21">
<span></span>
CSS实现水晶文字效果
</h2>
<h2 class="h22">
<span></span>
CSS实现金属质感文字效果
</h2>
<h2 class="h23">
<span></span>
CSS实现渐变文字效果
</h2>
<h2 class="h24">
<span></span>
CSS实现竖纹文字效果
</h2>
<h2 class="h25">
<span></span>
CSS实现横纹文字效果
</h2>
<h2 class="h26">
<span></span>
CSS实现斑驳文字效果
</h2>
<script type="text/javascript">
var html = "";
for(var i=0; i< 23; i++){
var opacity = 0.3 + 0.005 * i;
//var h = 23 - i;
html += '<span style="height:1px; background:white; opacity:'+opacity+'; top:'+i+'px;"></span>';
}
document.getElementById("css").innerHTML = html;;
</script>
</body>
