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 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
jQuery EasyUI 入门必看
2016/06/03 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
python取代netcat过程分析
2018/02/10 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
介绍一下write命令
2014/08/10 面试题
Python的两道面试题
2013/06/29 面试题
优质服务演讲稿
2014/05/14 职场文书
工厂标语大全
2014/10/06 职场文书
北京导游词
2015/02/12 职场文书
三好学生个人总结
2015/02/15 职场文书
保卫工作个人总结
2015/03/03 职场文书
全民创业工作总结
2015/08/13 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
SQL SERVER中的流程控制语句
2022/05/25 SQL Server