這裡的動物是怎麼變化的,其原理是什麼?這樣的效果用到了哪些前端技術?

時間 2021-06-02 06:24:57

1樓:biggates

昨天看到這個,今天有人問所以就研究一下:

Ctrl-U 看到 dom 元素的結構是這樣的:

="level-one hidden-startup"

>

="level-two"

>

="animal-mover"

>

="wrap right-to-left"

>

="shard-wrap"

>

="shard"

>div>

div>

="shard-wrap"

>

="shard"

>div>

div>

="shard-wrap"

>

="shard"

>div>

div>

樣式表在 //http://

中,隨手摘一點(人肉格式化及注釋):

/* preloader 的動畫,這個簡單很多 */

body

.preloader

.start-up-seq

.level-one

.shard-wrap

:nth-child(16

).shard

body

.preloader

.start-up-seq

.level-one

.shard-wrap

:nth-child(17

).shard

各個動物的:

.shard-wrap

.shard-wrap

.shard

/* level-one 和 preloader 的 */

.all-animals .level-one .shard-wrap:nth-child(1) .shard,

.preloader.start-up-seq .level-one .shard-wrap:nth-child(1) .shard

.all-animals .level-one .shard-wrap:nth-child(2) .shard,

.preloader.start-up-seq .level-one .shard-wrap:nth-child(2) .shard

具體每個動物的,可見微調不少

/* penguin */

#animalchanger

.penguin

.wrap

.shard-wrap

:nth-child(26

).shard

#animalchanger

.penguin

.wrap

.shard-wrap

:nth-child(27

).shard

/* butterfly */

#animalchanger

.butterfly

.wrap

.shard-wrap

:nth-child(13

).shard

#animalchanger

.butterfly

.wrap

.shard-wrap

:nth-child(14

).shard

當然了你會問為啥 -webkit-clip-path 在其他瀏覽器裡面怎麼辦,其實還有 fallback:

.nowebkitbrowser

.shard-wrap

:nth-child(1

)搞清楚他們的位置,根據不同的工具可能方法不一樣,大不了開了網格線乙個乙個數(其實肯定有更方便的方法吧,比如直接上個 SVG 畫板啥的……)。這一步得到了每個元素的三個座標和顏色。

格式化成 css 語句,用 less 之類的封裝個函式應該不複雜吧。我常用的方法是正規表示式替換。

微調,仔細觀察了一下微調不少,這個可能要手動了!

仔細觀察以後發現有些動物還有動作,這個是通過 js 加的:

js:/* 一共是 state-2, state-3, state-4 幾個 state,呼叫的時候引數是 $('body') */

function

animalStates(t

),1e3

),setTimeout

(function(),

2e3),setTimeout

(function(),

3e3)},

4e3)}

/* 另外還有一層 2-state-2,呼叫的時候引數也是 $('body') */

function

animalStatesSecondLevel(t

),1e3

),setTimeout

(function(),

1100

),setTimeout

(function(),

1400

),setTimeout

(function(),

1500)},

3e3)}

css:

.animal-animations-on

.two-state-two

#animalchanger

.peccary

.wrap

.shard-wrap

:nth-child(1

).shard

.animal-animations-on

.two-state-two

#animalchanger

.peccary

.wrap

.shard-wrap

:nth-child(2

).shard

.animal-animations-on

.two-state-two

#animalchanger

.peccary

.wrap

.shard-wrap

:nth-child(3

).shard

這裡估計大部分要手寫了……因為每個都不一樣啊

效率的話只要能開起來 GPU 加速應該都沒問題(而且全是三角形啊),雖然選擇器是有點慢不過實際效果還是流暢的(iPhone 5s,iOS 8.2)。

這個專案你說 Google 沒給錢我也不信。

這裡是怎麼得到的

龔漫奇 把,第二行,第三行,第四行一直到第n行都加到第一行,則第一行的每乙個元素都是a n 1 b,故由已知的你划紅線的部分 即a 1 n b 第一行的每乙個元素都等於零,所以整個行列式等於零。秩 A n 1。然後把行列式看成矩陣,那麼我們知道經過上述的行變換,矩陣的第一行都變成了零。繼續做列變換 ...

如何看待土耳其近年的外交政策變化?其背後是什麼樣的行為邏輯?

Mlsnye丶小凡 放棄加入歐盟的幻想了,歐盟不接納,土耳其決定整合中東伊斯蘭教,這就是為什麼土耳其天天喊恢復奧斯曼帝國,話說回來,土耳其鬧得越厲害對我們越有利,我們跟土耳其沒有地緣矛盾,土耳其跟巴基斯坦關係也好,而且土巴明確聯合反印度,土耳其又是北約攪屎棍,總之對我們大大的有利 土耳其一開始就加入...

糖尿病是如何引起神經末梢病變的?其原理是什麼?

健康Q博士 糖尿病引發神經末梢病變的主要通路是通過影響營養神經的血液能源供給來發病的,從而導致神經感覺異常和運動障礙。因此日常主要處理大都是對症處理,糾正異常感覺和改善運動功能。當然了,最重要的是還是調控血糖。 糖尿病末梢神經炎是糖尿病慢性並發神經病變的一種,也是糖尿病最多見的併發症之一,也屬於糖尿...