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

本篇內容主要講解“CSS3怎么制作文字半透明倒影效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS3怎么制作文字半透明倒影效果”吧!

 

效果如圖。Ps、背景線條是背景圖勒，和本文效果無關。。。

html代碼如下：

代碼如下:

<div class="content">
<h4 title="專業技能">專業技能</h4>
<div class="next"><!--其他內容--></div>
</div>

有兩種實現方式：

1.box-reflect

(屬性詳情見http://css.doyoe.com/ 屬性&rarr;邊框&rarr;box-reflect)

代碼如下:

.content h4{
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 h4{
position:relative;
float:left;
opacity:0.7;
font:40px/50px 'Microsoft yahei';
}
.content h4:before{
content:attr(title);
position:absolute;
z-index:1;
top:100%;
left:0;
height:100%;
width:100%;
-webkit-transform:scaleY(-1);
}
.content h4: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;
}

注:前面h4元素浮動是為了讓文字塊的寬度動態地剛好等同文字寬度，否則塊過長，導致after的遮罩延長，影響右邊沒有文字的部分

到此，相信大家對“CSS3怎么制作文字半透明倒影效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！