欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3制作版頭動畫效果

  發(fā)布時間:2020-12-24 16:12:33   作者:佚名   我要評論
這篇文章主要介紹了使用CSS3制作版頭動畫效果,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

網(wǎng)易看游戲官網(wǎng)(http://kanyouxi.163.com/)(已下架),是我以前(2014年)做的一個項目,也是我們首個放棄Flash,采用HTML5與制作動畫的網(wǎng)站,當時業(yè)內(nèi)為數(shù)不多的采用CSS3用于主動畫實際生產(chǎn)的網(wǎng)站,當然現(xiàn)在已經(jīng)很廣泛使用了,特別是在移動端,CSS3是性能的保障。現(xiàn)在總結(jié)分享一下,能讓自己有溫故知新之余,也希望對初學者進階有幫助。

怎樣的動畫?

這個動畫并不算復雜,但包含了transform,rotate,translate,keyframes,緩動,和循環(huán)次數(shù)這幾個重要的內(nèi)容。好了,先看看動畫效果,下面是錄屏動畫,也可以到網(wǎng)易看游戲官網(wǎng)(http://kanyouxi.163.com/)(已下架)上去看看。

有幾個關(guān)鍵點,按順序分別為:

  •  白色iPhone向上翻動,然后做幾個小幅度抖動;
  • 字幕從右邊出現(xiàn),把白色iPhone向左推動;
  • 白色iPhone快到心頭后,黑色iPhone也跟隨出現(xiàn);
  • 大標題“網(wǎng)易看游戲”背景波浪式閃爍滾動。

下面讓我們我們一個個來。

注:這是一個CSS3進階實踐文章,如果你對CSS3動畫還不是很了解,請先看這里: CSS3動畫 ,1分鐘快速了解一下再回來。

1. 向上翻動并抖動

這里有幾個關(guān)鍵屬性,詳細使用方法可以進去看: @keyframes , transform:rotate(deg); , transform-origin:x,y;

準備動畫關(guān)鍵幀@keyframes

@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    100% {
        transform:rotate(0deg); 
        transform-origin:125px 600px;
        }            
}

我們直接用百份比來作為幀點,因為后面還會把它再細分多個幀。

設(shè)置旋轉(zhuǎn)與Anchor Point(錨點transform-origin:x,y;

transform:rotate(-30deg);
transform-origin:125px 650px;

旋轉(zhuǎn)是必須的,但為何要修改Anchor Point呢?

Anchor Point,是借用了cocos2D里的說法,是指變換的原點。

因為transform的默認錨點是中心,即(50%,50%),在transform里Anchor Point屬性就是 transform-origin ,以下是默認值:

transform-origin:50%,50%

在支持3D的變換里,還有第3個數(shù)值:z,默認是0

如果不修改,就會以iPhone的中心為原點旋轉(zhuǎn),這不是我們想要的效果,所以把它移到下方的水平中央去。

這個圖片的寬度是250px,高度為525px,下方中央就是(125px,525px),但為了模擬實物在桌子上搖擺,還要往下移一些,經(jīng)過嘗試,我們最終選擇了(125px,650px),如下圖示:

添加抖動與擬物

抖動其實也是幾個關(guān)鍵幀組合的產(chǎn)物,首次旋轉(zhuǎn)不是0度,而是過了一點點的10度,接著往返各兩個關(guān)鍵幀,幅度逐漸減小。添加關(guān)鍵幀后的@keyframes改動如下:

@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; ,因為如果一成不變的錨點,會給人感覺像是一個鐘擺,太死板不夠擬物化,想像一下:一個東西以某個拋物線落到地上,經(jīng)過與地面碰撞,改變運動方向,最終慢慢停下來,所以我們把中心點的高度也減小一點,讓人看上去“ 不那么規(guī)律 ”。

在關(guān)鍵幀的時間點上,也模擬了慢出的緩動效果。所謂的動畫感覺做得好不好,也就是緩動效果做得如何,夠不夠接近物理世界給人的認知。

這個幀點也并非最后的時間點,請繼續(xù)往下看。

2. 字幕出現(xiàn)并推走iPhone

字幕出現(xiàn)

字幕在另外一個元素,所以我們新建一個關(guān)鍵幀組:

@keyframes content{
    0% { transform: translate3d(550px,0,0);}
    100% { transform: translate3d(0,0,0);}
}

因為是iPhone動畫先走,然后才是字幕,所以動畫延時執(zhí)行 animation-delay :

animation-delay:.2s;

但為了兩個關(guān)鍵幀組能更好的同步,不用算來算去,我們也以這樣做:

@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

先用透明度隱藏它,在40%才開始,在移動的過程再逐漸顯示,讓過程更平滑。

前面還說到,中間還要用字幕推iPhone一下,怎么做?

模擬碰撞

純CSS3是做不了的,除非全程用JS進行,或者用Box2D進行碰撞判斷。但我們這里只是一個簡單的走過場動畫,不需要人機交互,也不會變化移動的距離,所以,我們用一個變戲法,兩個動畫一起并行,在關(guān)鍵節(jié)點埋關(guān)鍵幀,即:字幕移動到iPhone位置時,iPhone才開始移動。

兩個關(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; }
}

/*以下選擇器略去了非動畫屬性設(shè)置,例如寬高等,我們就當他們默認就是正確的值吧*/
.iphone-front{ 
    animation: iphone-front 1.8s ease-out forwards;
}
.content{
    animation: content 1.8s ease-out;
}

可以看出,這里沒有使用delay屬性,是為了更直觀的設(shè)置并行動畫,大家都在60%的位置碰頭,都使用了ease-out緩出。

為什么iphone-front的100%幀處要重復90%的內(nèi)容?因為我們用了 animation-fill-mode 屬性,值為forwards,即停在最后一幀,如果100%沒有寫,就會退回到最初狀態(tài)了。

3. 黑色iPhone跟隨出現(xiàn)

黑色iPhone的動畫更簡單,只是一個漸現(xiàn)加移動,同樣也是另外一個并行動畫,不過這次可以用delay了,先預估一下大概出現(xiàn)的時間,可以得到從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;
}

這里不需要最后一幀重復寫代碼了,因為它本來就是(0,0,0),不會產(chǎn)生任何變化。

為何用translate3d(x,y,z);而不用translateX(x)?因為早前有人認為這個效率會更高,特別在移動端性能更優(yōu)。

查看手冊:transform

4. 大標題背景波浪

這個不涉及transfrom,讓前景與背景重疊在一起,背景圖片在y軸不間斷移動,無限循環(huán),無緩動;關(guān)鍵的是這個背景圖必須上下能無縫連接:

@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;
}

這是最簡單的做法,適合大多數(shù)情況。也有另外一些更高級的,例如使用mask,關(guān)于mask,有興趣請看 《CSS Masking》 。

其它效果

結(jié)語

手寫動畫,雖然比較費時,但能讓你了解現(xiàn)實原理。如果需要可視化制作,推薦一個在線工具給大家: cssanimate ,相比其它生成器,優(yōu)點是可以設(shè)置多個關(guān)鍵幀,而且可以通過鼠標拖動直接操作,推薦!

到此這篇關(guān)于使用CSS3制作版頭動畫效果的文章就介紹到這了,更多相關(guān)css3版頭動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • CSS實現(xiàn)漂亮的時鐘動畫效果的實例代碼

    這篇文章主要介紹了CSS實現(xiàn)漂亮的時鐘動畫效果的實例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-29
  • css3動畫鼠標放上圖片逐漸變大鼠標離開圖片逐漸縮小效果

    這篇文章主要介紹了css3動畫鼠標放上圖片逐漸變大鼠標離開圖片逐漸縮小,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-27
  • CSS 奇思妙想邊框動畫效果的實現(xiàn)

    這篇文章主要介紹了CSS 奇思妙想邊框動畫效果的實現(xiàn),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-18
  • CSS 動態(tài)高度過渡動畫效果的實現(xiàn)

    這篇文章主要介紹了CSS 動態(tài)高度過渡動畫效果的實現(xiàn),本文通過實例代碼給大家介紹的非常想詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-15
  • CSS3分享圖標按鈕動畫特效代碼

    CSS3分享圖標按鈕動畫特效代碼是一款社會分享圖標動畫特效,鼠標移上去會有一個膠囊閃動的效果。
    2020-12-15
  • CSS3通過var()和calc()函數(shù)實現(xiàn)動畫特效

    這篇文章主要介紹了CSS3通過var()和calc()函數(shù)實現(xiàn)動畫特效,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-29

最新評論