月亮:
通過css繪制的,通過width與height繪制一個(gè)正方形,然后設(shè)置border-radius: 50% 這樣就可以達(dá)到圓形的效果。通過box-shadow設(shè)置一定的陰影,最后通過關(guān)鍵幀動(dòng)畫對(duì)box-shadow的值做一個(gè)變化的效果,就會(huì)出現(xiàn)光暈的感覺
云:
云的繪制稍微有一點(diǎn)點(diǎn)麻煩,觀察下云,其實(shí)是由5個(gè)圓形圖組成,在想同的位置重疊后的效果。同樣的繪制月亮的辦法,然后通過box-shadow繪制投影,繪制4個(gè)不同大小的圓形圖,然后改變每一個(gè)的坐標(biāo)位置,讓其重疊在一起形成了最終的效果
通過css繪制的,通過width與height繪制一個(gè)正方形,然后設(shè)置border-radius: 50% 這樣就可以達(dá)到圓形的效果。通過box-shadow設(shè)置一定的陰影,最后通過關(guān)鍵幀動(dòng)畫對(duì)box-shadow的值做一個(gè)變化的效果,就會(huì)出現(xiàn)光暈的感覺
云:
云的繪制稍微有一點(diǎn)點(diǎn)麻煩,觀察下云,其實(shí)是由5個(gè)圓形圖組成,在想同的位置重疊后的效果。同樣的繪制月亮的辦法,然后通過box-shadow繪制投影,繪制4個(gè)不同大小的圓形圖,然后改變每一個(gè)的坐標(biāo)位置,讓其重疊在一起形成了最終的效果
2017-04-08
可以這樣寫 @keyframes bird-slow { from{background-position-x: -0px} to{background-position-x: -273px} } 假如沒用留意一下瀏覽器兼容問題,在keyframes前面加前綴實(shí)現(xiàn)兼容就行
2017-03-27
艾倫老師以及各位小伙伴們好,我將這個(gè)動(dòng)畫項(xiàng)目使用gulp進(jìn)行了重構(gòu),因?yàn)榧嫒莅沧渴謾C(jī)的原因,暫時(shí)去掉了視頻播放的功能。歡迎大家提出各種意見以及pull request
https://github.com/Leotw/christmas
https://github.com/Leotw/christmas
2017-03-05