软件开发培训班 >> 编程开发 >> JavaScript

CSS3实现3D文字动画效果

　　本文标签：3D文字,动画

<!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>

技术文章快速查找

Javascript 的addEventListener()及attachEvent()区别分析

数组Array进行原型prototype扩展后带来的for in遍历问题

javascript下兼容firefox选取textarea文本的代码

使用基于jquery的gamequery插件做JS乒乓球游戏

ExtJS 2.0实用简明教程之Ext类库简介

jquer之ajaxQueue简单实现代码

js字符串日期yyyy-MM-dd转化为date示例代码

js禁止页面复制功能禁用页面右键菜单示例代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建