CSS3制作文字半透明倒影效果

来源：互联网发布：mac输入法表情符号编辑：程序博客网时间：2024/04/28 20:30

</pre><span style="font-family: Helvetica, Tahoma, Arial, sans-serif; line-height: 25.1875px;font-size:18px;"><strong>1.box-reflect</strong></span><span style="font-family: Helvetica, Tahoma, Arial, sans-serif; font-size: 14px; line-height: 25.1875px;"> </span><img src="http://dl.iteye.com/upload/attachment/0062/5413/1876f794-903e-3866-b1e0-493f3756fe62.jpg" alt="" /><p></p><p></p><pre name="code" class="html"><div class="content"><h3 title="专业技能">专业技能</h3><div class="next"><!--其他内容--></div></div>

.content h3{    opacity:0.7;    font:40px/50px 'Microsoft yahei';    -webkit-box-reflect: below 5px -webkit-gradient(linear, center top, center bottom, from(transparent),color-stop(0.2, transparent), to(white));}

2.transform属性的scaleY方式：

.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;}

0 0