CSS3制作文字半透明倒影效果
/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/





效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。

html代码如下：

.content h3{    position:relative;    float:left;    opacity:0.7;    font:40px/50px 'Microsoft yahei';} .content h3:before{    content:attr(title);    position:absolute;    z-index:1;    top:100%;    left:0;    height:100%;    width:100%;    -webkit-transform:scaleY(-1);}.content h3:after{    content:'';    position:absolute;    z-index:2;    top:100%;    left:0;    height:100%;    width:100%;    background:-webkit-gradient(linear, center top, center bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));/*其他几个被省略了-_-!*/}.content .next{    clear:both;    padding:60px;}

注:前面h3元素浮动是为了让文字块的宽度动态地刚好等同文字宽度，否则块过长，导致after的遮罩延长，影响右边没有文字的部分


/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/