CSS3 3D文字动画效果

 首页 > 网页特效 > 文本特效 > CSS3 3D文字动画效果

CSS3 3D文字动画效果

 2018-08-23  604  收藏  0 赞一个  0 真差劲  0 去评论

<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3实现3D文字动画效果</title>
<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;
	/* animation */
	-moz-animation: 1s slidein;
	-webkit-animation: 1s slidein;
	/* 3d-transform */
	-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{
	/*  transition */
	-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">懒之才（www.aizhanzhe.com）</span>
</h1>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

CSS3 3D文字动画，值得推荐，完全纯CSS3实现的效果，不但实现了3D立体效果，而且当你把鼠标放在文字上的时候，文字还会慢慢展开，虽然不是很流畅，但用CSS3实现这种动画效果，已经很值得学习了。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行