CSS3制作文字半透明倒影效果的两种实现方式


Posted in HTML / CSS onAugust 08, 2014

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的遮罩延长,影响右边没有文字的部分
HTML / CSS 相关文章推荐
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 #HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 #HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 #HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 #HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 #HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 #HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 #HTML / CSS
You might like
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
中篇:安装及配置PHP
2006/12/13 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP线程的内存回收问题
2016/07/08 PHP
jQuery技巧总结
2011/01/01 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python中的字典遍历备忘
2015/01/17 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
团组织关系介绍信
2014/01/12 职场文书
大专生找工作自荐书
2014/06/10 职场文书
节约用水的口号
2014/06/20 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
组工干部演讲稿
2014/09/02 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android