CSS3制做文本半全透明倒映实际效果的两种完成方

日期:2021-03-07 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

 

实际效果如图。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的1个Demo源码的启迪
MDN Demo https://developer.mozilla.org/zh-CN/demos/detail/css3-reflection-effect/launch
神飞:1些上流的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(⑴);
}
.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的遮罩增加,危害右侧沒有文本的一部分
上一篇:纯css3完成照片翻牌殊效 返回下一篇:没有了