CSS3制作文字半透明倒影效果
效果如图。Ps、背景线条是背景图勒,和本文效果无关。。。
html代码如下:
- <div class="content">
- <h3 title="专业技能">专业技能</h3>
- <div class="next"><!--其他内容--></div>
- </div>
有两种实现方式:
1.box-reflect
(属性详情见http://css.doyoe.com/ 属性→边框→box-reflect)
- .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));
- }
但是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
- .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的遮罩延长,影响右边没有文字的部分
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。