如何利用CSS3制作3D效果文字具体实现样式


Posted in HTML / CSS onMay 02, 2013

下面这篇教程是教你如何用CSS3来制作3D效果的文字,文章翻译自3D CSS Shadow Text Tutorial。

如何利用CSS3制作3D效果文字具体实现样式


这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果。请注意,这个3D文字效果是用纯CSS的,没有用Javascript,并且需要用支持CSS3的浏览器才能看出效果,如firefox、chrome、safari和opera。
CSS文字阴影是如何实现的
为了实现3D的文字效果,我们将会利用CSS3的text-shadow属性,text-shadow的工作原理如下:
复制代码
代码如下:

.example-class
{
text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}

译者注:X表示x轴上的位移,可为负值;Y表示y轴上的位移,可为负值;Blur表示投影的宽度,不能为负值;Color为投影的颜色。
堆叠多层CSS投影
虽然我们没有必要堆叠多层投影,但通过堆叠多层投影会有更好的3D效果

如何利用CSS3制作3D效果文字具体实现样式

开始创建3D文字
你可能会选择比文字更深的颜色来作为投影的颜色,所以这个例子中我就用白色的文字,用深一点的灰色作为投影颜色,这个例子中我将H2的文字渲染3D效果,css代码如下:
复制代码
代码如下:

h2
{
text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow */
}

效果如下:

如何利用CSS3制作3D效果文字具体实现样式


好了,到这里你已经创建了基本的3D文字,然而,让我们进一步来实现鼠标滑过的文字放大效果,并用css的transision属性实现圆滑的淡入淡出效果。
首先用transform属性实现滑过字体放大
复制代码
代码如下:

h2:hover
{
/* CSS3 Transform Effect */
-webkit-transform: scale(1.2); /* Safari & Chrome */
-moz-transform: scale(1.2); /* Firefox */
-o-transform: scale(1.2); /* Opera */
}

效果如下:

如何利用CSS3制作3D效果文字具体实现样式

然后利用transition属性实现淡入淡出效果

复制代码
代码如下:

h2
{
/* CSS3 Transition Effect */
-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */
-moz-transition: all 0.12s ease-out; /* Firefox */
-o-transition: all 0.12s ease-out; /* Opera */
}

到此,我们就用CSS3实现了3D效果的文字,并且在鼠标滑过是让字体放大,且有淡入淡出的效果,这一切是用纯CSS实现的哦。
下面是这个例子的DEMO,一起看看
D CSS TEXT
WITH ‘ZOOM’
HTML / CSS 相关文章推荐
使用css3制作动感导航条示例
Jan 26 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 #HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 #HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 #HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 #HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 #HTML / CSS
You might like
php学习之 数组声明
2011/06/09 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php解决约瑟夫环示例
2014/04/09 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python书籍信息爬虫实例
2018/03/19 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python实现Event回调机制的方法
2019/02/13 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Django数据统计功能count()的使用
2020/11/30 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
自我推荐书
2013/12/04 职场文书
预备党员表决心书
2014/03/11 职场文书
汽车促销活动方案
2014/03/31 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书