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文字特效，只不过它是打字与炫彩的结合，在网页的一角放上这效果，给平静的网页增添点动态元素。
2009-10-10
纯CSS 链接悬停提示效果代码
CSS做出漂亮的鼠标悬停提示效果，使用层的绝对定位，不管你的网页窗口如何变化，提示层始终处于理想位置不会改变，兼容性也良好，因些很实用的一个链接提示功能代码。
2009-10-10
Marquee配合DIV实现的文字滚动效果代码
Marquee走马灯标签，用它能实现各种各样的滚动，而只需修改个别参数就行了，在WEB标准时代，Marquee的作用当然也应该与时俱进了.
2009-11-11
5分钟教你学会超简单的html+css魔幻霓虹灯文字特效
这篇文章5分钟教你学会超简单的html+css魔幻霓虹灯文字特效,只用简单的html+css就可以完成,不需要配置运行环境,魔幻的霓虹灯特效非常炫酷,一起来学习一下,需要的朋友可以参考下
2023-03-03
JavaScript 炫彩的文字
炫彩文字，在网页上用一下，会吸引别人的注意力，和CSS不相干，纯粹JavaScript实现的东西，代码不算少，高手在优化一下。
2009-10-10
javascript上下左右定时滚动插件
在网上找到的，我认为最为方便的一段定时滚动代码，找了很多其他的总是有这样那样的问题，好不容易找到的，就分享一下。
2010-06-06
javascript 走马灯效果的链接提示
走马灯效果的链接提示，大家的需求不一样，因此可能有朋友会喜欢这样的链接提示，用到的话，再好好美化一下，其实效果还是不错的。
2009-10-10
用按钮触发Javascript动态生成一个表格的代码
用按钮触发Javascript，动态生成一个表格，主要是使用innerHTML功能，每点击一次按钮，就会生成一个表格，当然也可以把表格改成一个DIV，这样就是生成一个层了，不过删除时候有些麻烦。
2009-10-10
Js仿新浪微博首页内容滚动
JavaScript仿新浪微博首页的内容滚动，将推荐的几条微博按一定规律自行滚动，依次类推，大家先看看效果就明白了
2010-11-11
让链接必须按先后顺序点击的JS代码
让链接必须按先后顺序点击的JS代码，用到广告上面比较好，有不少的文字或图片广告有类似效果，点链接的时候需要按顺序，请注意链接地址，写在JS代码里的是真正需要的地址。
2009-10-10