月亮:
通過css繪制的,通過width與height繪制一個正方形,然后設置border-radius: 50% 這樣就可以達到圓形的效果。通過box-shadow設置一定的陰影,最后通過關鍵幀動畫對box-shadow的值做一個變化的效果,就會出現光暈的感覺
云:
云的繪制稍微有一點點麻煩,觀察下云,其實是由5個圓形圖組成,在想同的位置重疊后的效果。同樣的繪制月亮的辦法,然后通過box-shadow繪制投影,繪制4個不同大小的圓形圖,然后改變每一個的坐標位置,讓其重疊在一起形成了最終的效果
通過css繪制的,通過width與height繪制一個正方形,然后設置border-radius: 50% 這樣就可以達到圓形的效果。通過box-shadow設置一定的陰影,最后通過關鍵幀動畫對box-shadow的值做一個變化的效果,就會出現光暈的感覺
云:
云的繪制稍微有一點點麻煩,觀察下云,其實是由5個圓形圖組成,在想同的位置重疊后的效果。同樣的繪制月亮的辦法,然后通過box-shadow繪制投影,繪制4個不同大小的圓形圖,然后改變每一個的坐標位置,讓其重疊在一起形成了最終的效果
2017-04-08
艾倫老師以及各位小伙伴們好,我將這個動畫項目使用gulp進行了重構,因為兼容安卓手機的原因,暫時去掉了視頻播放的功能。歡迎大家提出各種意見以及pull request
https://github.com/Leotw/christmas
https://github.com/Leotw/christmas
2017-03-05