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

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

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

html代码如下：

Html代码

<div class="content">
<h3 title="专业技能">专业技能</h3>
<div class="next"></div>
</div>

有两种实现方式：

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

Css代码

.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

Css代码

.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的遮罩延长，影响右边没有文字的部分

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

转载于:https://www.cnblogs.com/shenming/p/4234459.html

CSS3制作文字半透明倒影效果相关推荐

CSS3制作文字特效
今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助.废话不说,直接进入效果的制作,感兴趣的同学跟着我的代 ...
CSS3制作文字背景图
文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现使用 mix-blend-mode 能够轻易实现, ...
html制作文字效果,10个text-shadow制作的文字效果
css3的text-shadow属性能帮助我们设计很多有特效的文字效果,特别是运用在英文字体上.早前在<CSS3的文字阴影-text-shadow>和<CSS3 制作文字特效> ...
html5显示状态灯,如何使用css3+html5来制作文字霓虹灯效果
使用css3+html5来制作文字霓虹灯效果的特点文字带有闪烁的霓虹灯动画,且文字选中时也有很酷的动画特效: 文字可动态输入,且输入的文字实时渲染霓虹灯特效. 使用css3+html5来制作文字霓虹 ...
html霓虹灯效果图,如何使用css3+html5来制作文字霓虹灯效果（付完整代码）
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...
html设置发光字体制作,CSS3制作炫酷的自定义发光文字
CSS3制作炫酷的自定义发光文字 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px ...
html5闪光字效果,如何使用css3+html5来制作文字霓虹灯效果（付完整代码）
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...
html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...

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

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

CSS3制作文字半透明倒影效果相关推荐

最新文章

热门文章