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

 

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

html代码如下：

1. <div class="content">
2. <h3 title="专业技能">专业技能</h3>
3. <div class="next"><!--其他内容--></div>
4. </div>

有两种实现方式：

1.box-reflect 
(属性详情见http://css.doyoe.com/  属性→边框→box-reflect)

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

但是box-reflect属性只有chrome/Safari支持（支持详情见 http://caniuse.com/#search=box-reflect） 
FF和Opera不能兼容，所以有了以下替代方案。

2.transform属性的scaleY方式：

受到神飞的博文和MDN的一个Demo源代码的启发 
MDN Demo  https://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch 
神飞：一些上流的CSS3图片样式   http://www.qianduan.net/css3-image-styles.html

1. .content h3{
2. position:relative;
3. float:left;
4. opacity:0.7;
5. font:40px/50px 'Microsoft yahei';
6. }
7. .content h3:before{
8. content:attr(title);
9. position:absolute;
10. z-index:1;
11. top:100%;
12. left:0;
13. height:100%;
14. width:100%;
15. -webkit-transform:scaleY(-1);
16. }
17. .content h3:after{
18. content:'';
19. position:absolute;
20. z-index:2;
21. top:100%;
22. left:0;
23. height:100%;
24. width:100%;
25. background:-webkit-gradient(linear, center top, center bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));/*其他几个被省略了-_-!*/
26. }
27. .content .next{
28. clear:both;
29. padding:60px;
30. }

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