CSS3实现3D文字动画效果

ttx9n · 发表于 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> 
CSS3 3D文字动画 
</h1>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

dm00ji1s · 发表于 2022-8-9 01:56:24

这个源码还可以

i3x3r3 · 发表于 2022-8-12 01:32:11

老衲笑纳了

a971560 · 发表于 2022-9-18 14:35:59

老衲笑纳了

u6h2m4 · 发表于 2023-3-26 21:02:45

。。。。。。。。。。。。。。。

fzyzy · 发表于 2023-7-21 04:57:26

额UI废物iuhfujewfiewnnfen

黑白键 · 发表于 2023-8-31 08:25:06

好东西一定要看看！

cxst1h57 · 发表于 2023-9-16 06:30:12

论坛有你更精彩！

j__j33p · 发表于 2023-12-2 17:03:13

不错的源码论坛

u6h2m4 · 发表于 2024-5-9 16:42:07

好东西一定要看看！

账号		自动登录	找回密码
密码			立即注册

[JavaScript] CSS3实现3D文字动画效果

相关帖子