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 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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
日本十大惊悚动漫
2020/03/04 日漫
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
python爬取51job中hr的邮箱
2016/05/14 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
艺术教育实施方案
2014/05/03 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
实习指导教师评语
2014/12/30 职场文书
感谢师恩主题班会
2015/08/17 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android