如何利用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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
js实现登录与注册界面
2017/11/01 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
python多重继承新算法C3介绍
2014/09/28 Python
Python爬取三国演义的实现方法
2016/09/12 Python
Python 多线程的实例详解
2017/09/07 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
生物制药专业自我鉴定
2014/02/19 职场文书
学习雷锋活动总结
2014/04/29 职场文书
销售员岗位职责
2014/06/09 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2015年复活节活动总结
2015/02/27 职场文书
员工加薪申请报告
2015/05/15 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫