常见问题

CSS3实现3D文字动画效果

作者:用户投稿2026-01-11 12:58:02

<!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实现渐变色效果(不使用图片)

下一篇丨

CSS定义Hover实现文字变大的超级链接

全国咨询热线： 400-8878-609

新闻资讯

常见问题

CSS3实现3D文字动画效果

联系我们