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;}
CSS3 3D文字动画
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
推荐阅读
纯js网页画板(Graphics)类简介及实现代码
今天需要在网页上画一个图谱,想到用JS,经过学习,和网上搜索,经过整理优化得到下面代码,注意不是用HTML5的canvas,而是用的纯js复制代码 代码如下:/* 以下画点,画线,画圆的方法,都不是用HTML5的canvas,而是>>>详细阅读
本文标题:CSS3实现3D文字动画效果
地址:http://www.17bianji.com/kaifa2/JS/22712.html
1/2 1