HTML5中實(shí)現(xiàn)的CSS 3D文字旋轉(zhuǎn)動(dòng)畫

2024-09-05 12:18:48

字體：大中小

供稿：網(wǎng)友

一個(gè)基于HTML5的網(wǎng)頁文字3D旋轉(zhuǎn)動(dòng)畫效果，支持中文和英文字符，瀏覽請(qǐng)注意要使用支持CSS3技術(shù)的瀏覽器，比如Opera、Chrome等，主要結(jié)合transition 和 animation來實(shí)現(xiàn)，參考性更高。

<!doctype html><title>CSS 文字3D旋轉(zhuǎn)特效</title><link  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 {	 -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 id="iwvjtn8m0"    class="myLogo">源碼愛好者 CodeFans源碼愛好者 CodeFans</span></h1>

上一篇：牛叉的html5 canvas示例，仿Photoshop鋼筆工具效果

下一篇：html5 canvas 生成忍者鏢旋轉(zhuǎn)動(dòng)畫