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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
python列表与元组详解实例
2013/11/01 Python
Python 爬虫的工具列表大全
2016/01/31 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python实现学生通讯录管理系统
2021/02/25 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
儿童生日会策划方案
2014/05/15 职场文书
技术负责人岗位职责
2015/02/10 职场文书
化妆品促销活动总结
2015/05/07 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL