点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

CSS3实现3D文字动画效果_文字特效

来源：懂视网责编：小采时间：2020-11-27 21:06:16

CSS3实现3D文字动画效果_文字特效

CSS3实现3D文字动画效果_文字特效: 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; -webki

推荐度：

点击下载本文 文档为doc格式

导读CSS3实现3D文字动画效果_文字特效: 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; -webki

<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> 
<h2> 
CSS3 3D文字动画 
</h2>

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

CSS3实现3D文字动画效果_文字特效

CSS3实现3D文字动画效果_文字特效: 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; -webki

推荐度：

点击下载本文 文档为doc格式

标签：文字动画实现

热门焦点

最新推荐

猜你喜欢

热门推荐

产品服务发展历程企业资讯企业文化关于我们加入我们联系我们网站导航网站律师

中国扫黄打非网

Copyright © 2019-2025 51dongshi.net 版权所有

赣ICP备2023002352号-34

违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务

Top