当前位置：移动技术网 > IT编程>开发语言>JavaScript > CSS3实现3D文字动画效果

CSS3实现3D文字动画效果

2019年07月19日 | 移动技术网IT编程 | 我要评论

body{background:#333;} h1{font:normal 90px/1.5 'ultra','curlz mt','bauhaus 93

<!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中的Math.E属性使用详解

这是一个欧拉常数和自然对数的基数，约为 2.718. 语法: math.e 示例: ... [阅读全文]
weui中的picker使用js进行动态绑定数据

解决方案;　picker和Select组件是通过input标签绑定，可以先通过input的父级元素移除input标签，重新插入input标签，最后重... [阅读全文]
react-native flatlist 上拉加载onEndReached方法频繁触发的问题

问题在写flatlist复用组件时，调用的时候如果父组件是不定高的组件，会造成组件无法显示如果父组件样式{flex：1}，则会出现下拉方法频繁触... [阅读全文]
浅谈JavaScript面向对象--继承

一、继承的概念子类共享父类的数据和方法的行为，就叫继承。二、e55如何实现继承？探索javascript继承的本质 2.1... [阅读全文]
微信小程序textarea层级过高的解决方法

一、前言相信做过微信小程序开发的人应该都碰到过这个问题，因为这个需求实在太常见了由于textarea是属于原生组件，... [阅读全文]
JavaScript程序中的流程控制语句用法总结

条件判断语句 1.if语句 if (condition) statement1 else statement2 ... [阅读全文]
前端词汇U、V、W、Y

1. U开头开头 ... [阅读全文]
详谈commonjs模块与es6模块的区别

到目前为止，已经实习了3个月的时间了。最近在面试，在面试题里面有题目涉及到模块循环加载的知识。趁着这个机会，将commonjs模块与... [阅读全文]
javascript--淘宝页面的放大镜效果

放大镜效果需求：鼠标放入原图中，会出现一个黄色的遮盖层和一个放大的图片，鼠标移动时候，遮盖层会跟着鼠标一起移动，同时放大的图片会跟着一起移动。实... [阅读全文]
实现Jquery的Jqgrid表格组件的方法教程

用法还算简单，我也是摸着石头过河，写了几天curd才慢慢的了解他，我用到的场景就是用来取值，在页面进行相关数据的展示，如下图：看了上图，应该可以说是很明... [阅读全文]

网友评论


验证码：

移动技术网