使用CSS3制作版頭動(dòng)畫效果

網(wǎng)易看游戲官網(wǎng)(http://kanyouxi.163.com/)(已下架),是我以前(2014年)做的一個(gè)項(xiàng)目,也是我們首個(gè)放棄Flash,采用HTML5與制作動(dòng)畫的網(wǎng)站,當(dāng)時(shí)業(yè)內(nèi)為數(shù)不多的采用CSS3用于主動(dòng)畫實(shí)際生產(chǎn)的網(wǎng)站,當(dāng)然現(xiàn)在已經(jīng)很廣泛使用了,特別是在移動(dòng)端,CSS3是性能的保障?,F(xiàn)在總結(jié)分享一下,能讓自己有溫故知新之余,也希望對(duì)初學(xué)者進(jìn)階有幫助。
怎樣的動(dòng)畫?
這個(gè)動(dòng)畫并不算復(fù)雜,但包含了transform,rotate,translate,keyframes,緩動(dòng),和循環(huán)次數(shù)這幾個(gè)重要的內(nèi)容。好了,先看看動(dòng)畫效果,下面是錄屏動(dòng)畫,也可以到網(wǎng)易看游戲官網(wǎng)(http://kanyouxi.163.com/)(已下架)上去看看。
有幾個(gè)關(guān)鍵點(diǎn),按順序分別為:
- 白色iPhone向上翻動(dòng),然后做幾個(gè)小幅度抖動(dòng);
- 字幕從右邊出現(xiàn),把白色iPhone向左推動(dòng);
- 白色iPhone快到心頭后,黑色iPhone也跟隨出現(xiàn);
- 大標(biāo)題“網(wǎng)易看游戲”背景波浪式閃爍滾動(dòng)。
下面讓我們我們一個(gè)個(gè)來。
注:這是一個(gè)CSS3進(jìn)階實(shí)踐文章,如果你對(duì)CSS3動(dòng)畫還不是很了解,請(qǐng)先看這里: CSS3動(dòng)畫 ,1分鐘快速了解一下再回來。
1. 向上翻動(dòng)并抖動(dòng)
這里有幾個(gè)關(guān)鍵屬性,詳細(xì)使用方法可以進(jìn)去看: @keyframes , transform:rotate(deg);
, transform-origin:x,y;
準(zhǔn)備動(dòng)畫關(guān)鍵幀@keyframes
@keyframes iphone-front{ 0% { transform:rotate(-30deg); transform-origin:125px 650px; } 100% { transform:rotate(0deg); transform-origin:125px 600px; } }
我們直接用百份比來作為幀點(diǎn),因?yàn)楹竺孢€會(huì)把它再細(xì)分多個(gè)幀。
設(shè)置旋轉(zhuǎn)與Anchor Point(錨點(diǎn)transform-origin:x,y; )
transform:rotate(-30deg); transform-origin:125px 650px;
旋轉(zhuǎn)是必須的,但為何要修改Anchor Point呢?
Anchor Point,是借用了cocos2D里的說法,是指變換的原點(diǎn)。
因?yàn)閠ransform的默認(rèn)錨點(diǎn)是中心,即(50%,50%),在transform里Anchor Point屬性就是 transform-origin
,以下是默認(rèn)值:
transform-origin:50%,50%
在支持3D的變換里,還有第3個(gè)數(shù)值:z,默認(rèn)是0
如果不修改,就會(huì)以iPhone的中心為原點(diǎn)旋轉(zhuǎn),這不是我們想要的效果,所以把它移到下方的水平中央去。
這個(gè)圖片的寬度是250px,高度為525px,下方中央就是(125px,525px),但為了模擬實(shí)物在桌子上搖擺,還要往下移一些,經(jīng)過嘗試,我們最終選擇了(125px,650px),如下圖示:
添加抖動(dòng)與擬物
抖動(dòng)其實(shí)也是幾個(gè)關(guān)鍵幀組合的產(chǎn)物,首次旋轉(zhuǎn)不是0度,而是過了一點(diǎn)點(diǎn)的10度,接著往返各兩個(gè)關(guān)鍵幀,幅度逐漸減小。添加關(guān)鍵幀后的@keyframes改動(dòng)如下:
@keyframes iphone-front{ 0% { transform:rotate(-30deg); transform-origin:125px 650px; } 50% { transform:rotate(10deg); transform-origin:125px 600px; } 75% { transform:rotate(-5deg); } 100% { transform:rotate(0deg); } }
注意,上面33%位置的幀處,添加了一條 transform-origin:125px 600px;
,因?yàn)槿绻怀刹蛔兊腻^點(diǎn),會(huì)給人感覺像是一個(gè)鐘擺,太死板不夠擬物化,想像一下:一個(gè)東西以某個(gè)拋物線落到地上,經(jīng)過與地面碰撞,改變運(yùn)動(dòng)方向,最終慢慢停下來,所以我們把中心點(diǎn)的高度也減小一點(diǎn),讓人看上去“ 不那么規(guī)律 ”。
在關(guān)鍵幀的時(shí)間點(diǎn)上,也模擬了慢出的緩動(dòng)效果。所謂的動(dòng)畫感覺做得好不好,也就是緩動(dòng)效果做得如何,夠不夠接近物理世界給人的認(rèn)知。
這個(gè)幀點(diǎn)也并非最后的時(shí)間點(diǎn),請(qǐng)繼續(xù)往下看。
2. 字幕出現(xiàn)并推走iPhone
字幕出現(xiàn)
字幕在另外一個(gè)元素,所以我們新建一個(gè)關(guān)鍵幀組:
@keyframes content{ 0% { transform: translate3d(550px,0,0);} 100% { transform: translate3d(0,0,0);} }
因?yàn)槭莍Phone動(dòng)畫先走,然后才是字幕,所以動(dòng)畫延時(shí)執(zhí)行 animation-delay :
animation-delay:.2s;
但為了兩個(gè)關(guān)鍵幀組能更好的同步,不用算來算去,我們也以這樣做:
@keyframes content{ 0% { opacity: 0;} 40% { transform: translate3d(550px,0,0); opacity: 0;} 100% { transform: translate3d(0,0,0); opacity: 1; } }
先用透明度隱藏它,在40%才開始,在移動(dòng)的過程再逐漸顯示,讓過程更平滑。
前面還說到,中間還要用字幕推iPhone一下,怎么做?
模擬碰撞
純CSS3是做不了的,除非全程用JS進(jìn)行,或者用Box2D進(jìn)行碰撞判斷。但我們這里只是一個(gè)簡(jiǎn)單的走過場(chǎng)動(dòng)畫,不需要人機(jī)交互,也不會(huì)變化移動(dòng)的距離,所以,我們用一個(gè)變戲法,兩個(gè)動(dòng)畫一起并行,在關(guān)鍵節(jié)點(diǎn)埋關(guān)鍵幀,即:字幕移動(dòng)到iPhone位置時(shí),iPhone才開始移動(dòng)。
兩個(gè)關(guān)鍵幀組結(jié)合起來就是:
@keyframes iphone-front{ 0% {transform:rotate(-30deg); transform-origin:125px 650px; opacity: 0;} 20% {transform:rotate(10deg); transform-origin:125px 600px; opacity: 1;} 30% {transform:rotate(-5deg);} 38% {transform:rotate(0deg);} 60% {transform: translate3d(0,0,0); opacity: 1;} 90% {transform: translate3d(-340px,0,0); } 100% {transform: translate3d(-340px,0,0);} } @keyframes content{ 0% { opacity: 0;} 40% { transform: translate3d(550px,0,0); opacity: 0;} 60% { transform: translate3d(225px,0,0); opacity: 1; } 80% { transform: translate3d(0,0,0); opacity: 1; } 100% { transform: translate3d(0,0,0); opacity: 1; } } /*以下選擇器略去了非動(dòng)畫屬性設(shè)置,例如寬高等,我們就當(dāng)他們默認(rèn)就是正確的值吧*/ .iphone-front{ animation: iphone-front 1.8s ease-out forwards; } .content{ animation: content 1.8s ease-out; }
可以看出,這里沒有使用delay屬性,是為了更直觀的設(shè)置并行動(dòng)畫,大家都在60%的位置碰頭,都使用了ease-out緩出。
為什么iphone-front的100%幀處要重復(fù)90%的內(nèi)容?因?yàn)槲覀冇昧?animation-fill-mode 屬性,值為forwards,即停在最后一幀,如果100%沒有寫,就會(huì)退回到最初狀態(tài)了。
3. 黑色iPhone跟隨出現(xiàn)
黑色iPhone的動(dòng)畫更簡(jiǎn)單,只是一個(gè)漸現(xiàn)加移動(dòng),同樣也是另外一個(gè)并行動(dòng)畫,不過這次可以用delay了,先預(yù)估一下大概出現(xiàn)的時(shí)間,可以得到從0.5s開始:
@keyframes iphone-back{ 0% { transform: translate3d(97px,0,0); opacity: 0;} 40%{ opacity: 0; } 50%{ transform: translate3d(0,0,0); opacity: 1;} 100% {opacity: 1; } } .iphone-back-ani{ animation: iphone-back 1.8s ease-out .5s forwards; }
這里不需要最后一幀重復(fù)寫代碼了,因?yàn)樗緛砭褪?0,0,0),不會(huì)產(chǎn)生任何變化。
為何用translate3d(x,y,z);而不用translateX(x)?因?yàn)樵缜坝腥苏J(rèn)為這個(gè)效率會(huì)更高,特別在移動(dòng)端性能更優(yōu)。
查看手冊(cè):transform
4. 大標(biāo)題背景波浪
這個(gè)不涉及transfrom,讓前景與背景重疊在一起,背景圖片在y軸不間斷移動(dòng),無限循環(huán),無緩動(dòng);關(guān)鍵的是這個(gè)背景圖必須上下能無縫連接:
@keyframes title{ 0% { background-position: 0 0;} 100% { background-position: 0 -76px;} } .title-bg{ width: 301px; height: 61px; position:absolute; top:0; left:0; z-index:1; background: url(title_text_bg.png) repeat-y; animation: title 1.2s linear; animation-iteration-count:infinite; } .title-front{ width: 301px; height: 61px; position:absolute; top:0; left:0; z-index:2; background: url(title_text_front.png) no-repeat; }
這是最簡(jiǎn)單的做法,適合大多數(shù)情況。也有另外一些更高級(jí)的,例如使用mask,關(guān)于mask,有興趣請(qǐng)看 《CSS Masking》 。
其它效果
結(jié)語
手寫動(dòng)畫,雖然比較費(fèi)時(shí),但能讓你了解現(xiàn)實(shí)原理。如果需要可視化制作,推薦一個(gè)在線工具給大家: cssanimate ,相比其它生成器,優(yōu)點(diǎn)是可以設(shè)置多個(gè)關(guān)鍵幀,而且可以通過鼠標(biāo)拖動(dòng)直接操作,推薦!
到此這篇關(guān)于使用CSS3制作版頭動(dòng)畫效果的文章就介紹到這了,更多相關(guān)css3版頭動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS實(shí)現(xiàn)漂亮的時(shí)鐘動(dòng)畫效果的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)漂亮的時(shí)鐘動(dòng)畫效果的實(shí)例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-29css3動(dòng)畫鼠標(biāo)放上圖片逐漸變大鼠標(biāo)離開圖片逐漸縮小效果
這篇文章主要介紹了css3動(dòng)畫鼠標(biāo)放上圖片逐漸變大鼠標(biāo)離開圖片逐漸縮小,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-27CSS 奇思妙想邊框動(dòng)畫效果的實(shí)現(xiàn)
這篇文章主要介紹了CSS 奇思妙想邊框動(dòng)畫效果的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-18CSS 動(dòng)態(tài)高度過渡動(dòng)畫效果的實(shí)現(xiàn)
這篇文章主要介紹了CSS 動(dòng)態(tài)高度過渡動(dòng)畫效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常想詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-15- CSS3分享圖標(biāo)按鈕動(dòng)畫特效代碼是一款社會(huì)分享圖標(biāo)動(dòng)畫特效,鼠標(biāo)移上去會(huì)有一個(gè)膠囊閃動(dòng)的效果。2020-12-15
CSS3通過var()和calc()函數(shù)實(shí)現(xiàn)動(dòng)畫特效
這篇文章主要介紹了CSS3通過var()和calc()函數(shù)實(shí)現(xiàn)動(dòng)畫特效,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-29