首页 > 代码库 > CSS3制作文字半透明倒影效果

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

2024-11-09 09:27:02   203人阅读

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

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




技术分享 

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

html代码如下： 
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) 

Css代码  技术分享
  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 


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

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


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

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


联系
我们