注册 | 登陆
您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

用CSS3制作3D文字效果代码实例教程

  稿源:本站整理   2018-09-05   点击:   撤稿纠错
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果。

阿里西西web开发网为大家整理了这篇用CSS3制作3D文字效果代码实例教程,如果这篇文章在您的工作或学习中有帮助,欢迎常回来看看哦,更多精彩的教程请访问我们的主页,以下是教程浏览:


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

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

译者注:X表示x轴上的位移,可为负值;Y表示y轴上的位移,可为负值;Blur表示投影的宽度,不能为负值;Color为投影的颜色。
堆叠多层CSS投影
虽然我们没有必要堆叠多层投影,但通过堆叠多层投影会有更好的3D效果
开始创建3D文字
你可能会选择比文字更深的颜色来作为投影的颜色,所以这个例子中我就用白色的文字,用深一点的灰色作为投影颜色,这个例子中我将H2的文字渲染3D效果,css代码如下:

1
2
3
4
5
6
7
8
9
10
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 */
}

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

1
2
3
4
5
6
7
h2:hover
{
    /* CSS3 Transform Effect */
    -webkit-transform: scale(1.2);    
/* Safari & Chrome */
    -moz-transform: scale(1.2);       
/* Firefox */
    -o-transform: scale(1.2);         
/* Opera */
}

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

1
2
3
4
5
6
7
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实现的哦。
 


关于用CSS3制作3D文字效果代码实例教程的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/a/2018090590781.shtml方便下次再访问哦。


更多关于 CSS3 3D文字 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示