CSS3 3D文字动画效果

2020-01-27 14:18:15

字体：大中小

来源：转载

供稿：网友

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

<!doctype html><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.cuoxin.com）</span></h1>

上一篇：CSS3做的头像效果，CSS3学习实例

下一篇：CSS3图片圆角+阴影特效

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注