CSS3制作文字半透明倒影效果
2015-01-19 18:17
399 查看
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)原创 转载请注明-----------------*/
相关文章推荐
- CSS3制作文字半透明倒影效果
- CSS3制作文字半透明倒影效果
- CSS3制作文字半透明倒影效果
- PS制作文字倒影效果
- 用CSS3的box-reflect设置文字倒影效果的方法讲解
- 用CSS3的box-reflect来制作倒影效果
- css3之animation制作闪烁文字效果
- 见过这样的用CSS3制作的3D立体效果文字吗?
- 如何利用CSS3制作3D文字效果
- css3之animation制作闪烁文字效果 转
- CSS3| 制作文字波浪线效果
- ppt文字磨砂玻璃效果制作教程
- CSS3 制作Drop Shadow效果
- 用css3,transform3d制作房屋全景展示效果(一)
- Photoshop文字之——制作逼真的水中倒影文字特效
- 水中倒影效果制作
- 如何在Swiper内制作CSS3动画效果
- 将图片的说明文字显示在图片之上且背景半透明效果
- 非常漂亮的图片展示效果,倒影,可以用用鼠标中键滚动,半透明的效果,也很方便改为动态的,带图
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码