CSS3实现3D文字动画效果

更新时间：2012年12月26日 09:00:36 作者：

CSS3 3D文字动画，看到这个字眼都觉得震撼，顺便兼用下另两个属性：transition 和 animation。由于使用CSS3技术，因此测试时请使用火狐或Chrome等浏览器，否则不能看到效果

<!doctype html> <link href='http://fonts.googleapis.com/css?family=Ultra&v2' rel='stylesheet' type='text/css'> <style> body{background:#333;} h1{font:normal 90px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409;position:absolute;top:85px;left:10px;width:300px; -moz-animation: 1s slidein; -webkit-animation: 1s slidein; -webkit-perspective: 600; -moz-perspective: 600px; } @-moz-keyframes slidein { from {top:1550px;} 85% {top:5px;} to {top:85px;} } @-webkit-keyframes slidein { from {top:1550px;} 85% {top:5px;} to {top:85px;} } .myLogo,.myLogo a{ -moz-transition: all 2s ease-in-out 0s; -webkit-transition:all 2s ease-in-out 0; transition:all 2s ease-in-out 0; } .myLogo{position:relative;display:inline-block;zoom:1;top:0;left:0;text-shadow:-2px -1px 1px #7e9409;opacity: 0.8;filter:alpha(opacity=50); -webkit-transform: rotateY(30deg); -moz-transform: rotateY(30deg); transform: rotateY(30deg); } h1:hover .myLogo { /* 3d-transform */ -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); text-shadow:0; } .myLogo a{position:absolute;top:1px;left:5px;color:#B7D902;text-shadow:-1px -1px 1px #fff;text-decoration: none;} h1:hover .myLogo a{left: 2px;} </style> <h1> <span class="myLogo">CSS3 3D文字动画</span> </h1>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript 平滑文字闪烁
基于JavaScript的平滑文字闪烁,不是单纯的闪烁,貌似还带有一点点别的效果,比如淡入/淡出,那些颜色值你是可以变的,改成你想要的,还有闪烁间隔等,都可以修改的.
2009-10-10
JavaScript 仿歌词效果
这是一个文字叠加滚动效果，当然离不开JavaScript了，看上去像MTV的歌词效果，用两种颜色的文字叠加形成的效果，用Js去控制时间和颜色，这个当然你可以自己修改噢！
2009-10-10
VBScript 实现文字遮罩
用VBScript捕捉鼠标的移动，然后令光线射向也随着移动，这样就形成了鼠标像光源的效果。
2009-10-10
Js制作点击输入框时默认文字消失的效果
为了提高用户体验和易用度，一些设计师会对网页中用户经常用的东西进行优化，比如输入框。一般的输入框是怎样优化的呢？从用户体验的角度出发，简化用户使用步骤，让用户用得更方便就是提高了易用性
2015-09-09
JavaScript实现雪花飘落效果特效
雪，是冬天的灵魂，为大地铺好背景，之后发生的都如梦似幻，就像童话般的存在。冬天没有雪，能难倒程序猿吗，没有雪自己造，这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下
2023-01-01
CSS3实现3D文字动画效果
CSS3 3D文字动画，看到这个字眼都觉得震撼，顺便兼用下另两个属性：transition 和 animation。由于使用CSS3技术，因此测试时请使用火狐或Chrome等浏览器，否则不能看到效果
2012-12-12
仿打字特效的JS逐字出现的信息文字
JavaScript编写的文字特效，看似打字的效果，让文字逐个出现，你可以以这个为基础给你心爱的人写一段祝福的语，这的确挺合适。
2009-10-10
javascript 实用的文字链提示框效果
鼠标滑过文章中的链接文字，要在相应位置弹出提示框，提示框的样式由css来控制，高度自适应；鼠标可以点击提示框的中的链接,滑离提示框时，框自动消失
2010-06-06
文字在网页上下浮动学习可以不建议用
JavaScript控制文字像跳跳球一样在网页上浮动，碰到边缘自动回来，有兴趣看一下。
2009-11-11
javascript 模拟Marquee文字向左均匀滚动代码
Marquee是HTML语言里固有的文字滚动标签，虽然用着方便，但是功能上有一些限制，很多时候我们都是通过JavaScript来补充这一功能.
2009-10-10

CSS3实现3D文字动画效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具