快捷導(dǎo)航

CSS3實現(xiàn)3D文字動畫效果

更新時間：2012年12月26日 09:00:36 作者：

CSS3 3D文字動畫，看到這個字眼都覺得震撼，順便兼用下另兩個屬性：transition 和 animation。由于使用CSS3技術(shù)，因此測試時請使用火狐或Chrome等瀏覽器，否則不能看到效果

<!doctype html> <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 { /* 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 id="wppm3vysvbp"    class="myLogo">CSS3 3D文字動畫</span> </h1>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

JavaScript 平滑文字閃爍
基于JavaScript的平滑文字閃爍,不是單純的閃爍,貌似還帶有一點點別的效果,比如淡入/淡出,那些顏色值你是可以變的,改成你想要的,還有閃爍間隔等,都可以修改的.
2009-10-10
JavaScript 仿歌詞效果
這是一個文字疊加滾動效果，當(dāng)然離不開JavaScript了，看上去像MTV的歌詞效果，用兩種顏色的文字疊加形成的效果，用Js去控制時間和顏色，這個當(dāng)然你可以自己修改噢！
2009-10-10
VBScript 實現(xiàn)文字遮罩
用VBScript捕捉鼠標(biāo)的移動，然后令光線射向也隨著移動，這樣就形成了鼠標(biāo)像光源的效果。
2009-10-10
Js制作點擊輸入框時默認(rèn)文字消失的效果
為了提高用戶體驗和易用度，一些設(shè)計師會對網(wǎng)頁中用戶經(jīng)常用的東西進行優(yōu)化，比如輸入框。一般的輸入框是怎樣優(yōu)化的呢？從用戶體驗的角度出發(fā)，簡化用戶使用步驟，讓用戶用得更方便就是提高了易用性
2015-09-09
JavaScript實現(xiàn)雪花飄落效果特效
雪，是冬天的靈魂，為大地鋪好背景，之后發(fā)生的都如夢似幻，就像童話般的存在。冬天沒有雪，能難倒程序猿嗎，沒有雪自己造，這篇文章主要介紹了JavaScript實現(xiàn)雪花飄落效果特效,需要的朋友可以參考下
2023-01-01
CSS3實現(xiàn)3D文字動畫效果
CSS3 3D文字動畫，看到這個字眼都覺得震撼，順便兼用下另兩個屬性：transition 和 animation。由于使用CSS3技術(shù)，因此測試時請使用火狐或Chrome等瀏覽器，否則不能看到效果
2012-12-12
仿打字特效的JS逐字出現(xiàn)的信息文字
JavaScript編寫的文字特效，看似打字的效果，讓文字逐個出現(xiàn)，你可以以這個為基礎(chǔ)給你心愛的人寫一段祝福的語，這的確挺合適。
2009-10-10
javascript 實用的文字鏈提示框效果
鼠標(biāo)滑過文章中的鏈接文字，要在相應(yīng)位置彈出提示框，提示框的樣式由css來控制，高度自適應(yīng)；鼠標(biāo)可以點擊提示框的中的鏈接,滑離提示框時，框自動消失
2010-06-06
文字在網(wǎng)頁上下浮動學(xué)習(xí)可以不建議用
JavaScript控制文字像跳跳球一樣在網(wǎng)頁上浮動，碰到邊緣自動回來，有興趣看一下。
2009-11-11
javascript 模擬Marquee文字向左均勻滾動代碼
Marquee是HTML語言里固有的文字滾動標(biāo)簽，雖然用著方便，但是功能上有一些限制，很多時候我們都是通過JavaScript來補充這一功能.
2009-10-10