下面这篇教程是教你如何用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
|
h 2
{
text-shadow :
1px
1px 0
#CCC ,
2px
2px 0
#CCC ,
3px
3px 0
#444 ,
4px
4px 0
#444 ,
5px
5px 0
#444 ,
6px
6px 0
#444 ;
}
|
效果如下:
好了,到这里你已经创建了基本的3D文字,然而,让我们进一步来实现鼠标滑过的文字放大效果,并用css的transision属性实现圆滑的淡入淡出效果。
首先用transform属性实现滑过字体放大
1
2
3
4
5
6
7
|
h 2: hover
{
-webkit-transform: scale( 1.2 );
-moz-transform: scale( 1.2 );
-o-transform: scale( 1.2 );
}
|
效果如下:
然后利用transition属性实现淡入淡出效果
1
2
3
4
5
6
7
|
h 2
{
-webkit-transition:
all 0.12 s ease-out;
-moz-transition:
all 0.12 s ease-out;
-o-transition:
all 0.12 s ease-out;
}
|
到此,我们就用CSS3实现了3D效果的文字,并且在鼠标滑过是让字体放大,且有淡入淡出的效果,这一切是用纯CSS实现的哦。
下面是这个例子的DEMO,一起看看
3D CSS TEXT
WITH ‘ZOOM’
分享到:
相关推荐
div css3属性制作文字列表3D时间轴排列效果 div css3属性制作文字列表3D时间轴排列效果 div css3属性制作文字列表3D时间轴排列效果
这是一款使用纯CSS3制作的超酷3D文字跑马灯特效。该跑马灯特效将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向。
请注意,这个3D文字效果是用纯CSS的,没有用Javascript,并且需要用支持CSS3的浏览器才能看出效果,如firefox、chrome、safari和opera。 CSS文字阴影是如何实现的 为了实现3D的文字效果,我们将会利用CSS3的text-...
CSS3文字变形3D阴影效果,纯CSS3代码,3D文字,文字阴影特效。
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效。该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样。而且文字还会来回的摆动旋转,效果非常好。
CSS3卡片折叠样式3D文字标题特效,用CSS3属性和JS悬停制作页面标题的特效,可以放在自己的博客上,非常的好看,建议下载
这是一款效果使用纯js和CSS3制作的炫酷3D立体卡通文字特效。该特效通过js代码来克隆字母的内容,并通过 CSS text-shadow属性和transform属性将字母渲染为3D立体效果。
基于css3 keyframes属性制作的3D立体阴影文字动画特效,也支持中文,只是字体不合适的话,效果没那么好看。
这是一款效果使用纯js和CSS3制作的炫酷3D立体卡通文字特效。该特效通过js代码来克隆字母的内容,并通过 CSS text-shadow属性和transform属性将字母渲染为3D立体效果。
实现效果: div css3属性制作文字列表3D时间轴排列效果,这样的效果我觉可以放在个人网站中,前面是头像,后面的是心情日记之类的。这样的效果也是还不错的。php中文网推荐下载!
这是一款使用纯css3制作的文字动画特效。这款炫酷css3文字特效共有5种效果:上下滚动效果、淡入淡出效果、文字旋转效果、放大缩小效果和3d翻转效果。
CSS3 3D阴影文字动画特效是一款基于css3 keyframes属性制作3D立体阴影文本动画特效。
纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧...文字说明较多)的CSS3动画效果28个纯css3 加载loading动画特效轻量级CSS3立体式3D旋转动画效果简单易用的纯CSS3图片墙效果css3高度灵活的模拟...
非常实用的特效代码,可以完美运行,可以二次修改!
HTML5 SVG 制作极强3D视觉特效的阴影文字动画,文字由两层嵌套而成,有很不错的质感 ,下层的文字会产生流水动画效果,且下层文字应用于阴影效果,十分的不错的效果。
CSS3 3D动画效果的柱状图表,这个图表是用来统计步数的,不过用于其它数据统计当然也行了。初始化时候,一切都是平面的,当鼠标有点击运作的时候,图表立即慢慢变成3维状态,图片也变成三维的了,周边自动生成阴影...
HTML5 canvas 3D文字云动画基于Modernizr2.6.2制作,3D球形旋转动画,文字云动画。
一款利用html5的figcaption标签和css3 3d transform,css3 transition等技术制作的图片标题hover效果,共有8种不同的惊艳效果。
这是一款这是一款使用CSS3制作的效果非常炫酷的鼠标滑过卡片3D翻转特效。该特效开始时,图片被在3D空间中倾斜,当顶部滑过图片的时候,卡片平滑过渡到正常位置,卡片上的图片被缩小,同时显示出说明文字和一些链接...