用HTML和CSS實現WWDC 2015上的動畫效果

用HTML和CSS實現WWDC 2015上的動畫效果

 

原文:https://cssanimation.rocks/wwdc15/css

譯者:周曉楷(@Helkylegit


每一年,蘋果都會召開一次重大的會議。WWDC(蘋果開發者大會)是iOS開發者和OSX開發者學習蘋果先進高科技和移動設備與桌面軟件新概念的好機會。github

每年的這個時候,他們都會製造出不少新創意,今年,我被一個用簡單圓圈和形狀製做出來的圖標所驚豔,因而我決定用HTML和CSS來實現它。瀏覽器

WWDC 15邀請卡post


蘋果的圖標一般都會使用顏色和形狀的疊加,好比iOS 7 Photos圖標。今年WWDC邀請函用了下面這貨。學習

20.png

它由一些列層疊和半透明的形狀構成,很是適合用HTML和CSS來實現。字體

HTML動畫


設計這樣一塊負責的東西須要稍微分析一下。首先,我把它分解成各個部分。 大方向看它是由三種形狀構成的,主要圖形爲8個大圓,我先把它們列出來:
21.png網站

這裏我分割成幾個類,這樣作方便後面把large,circle,等類提取出來單獨寫,代碼會整潔不少。

而後咱們有八個小形狀,處於大圓的上邊,這些形狀由4個圓形和4個方形構成,方形是由圓角的,我這樣寫HTML

22.png

我用了circle,squircle以及數字1到8來爲各個div設置類名,這樣作的好處是,後面爲它們設置形狀和顏色的時候很方便。

最後咱們把兩個大方形反倒logo中間。

23.png

一樣,我用了large和squircle。

Logo和內容


接下來咱們給中間的方形增添點內容。

24.png

這裏咱們用了一個SVG圖片,還有邀請函的內容。邀請函的字體爲San Francisco 可是字體不是OSX標準的,因此這裏我換成Helvetica Neue Light。

寫圓和方塊樣式


我要作的第一件事是把circle和squircle的樣式寫好。

25.png

大部分形狀是大得,因此這我把默認值設大了。每一個元素的定位都是absolute而且有一個白的邊框。邊框可能不會跟邀請函的如出一轍,可是能夠給形狀多點光澤。

接下來咱們給大圓加上樣式,設置border-radius爲50%,而且使用left,top值設置位置。

26.png

這個時候全部的圓都是在同一個位置上邊。咱們使用點小技巧,經過transform-origin的值來改變位置。默認的transform-origin值爲(50%,50%),這裏咱們把值設爲圓的底部,而後咱們稍微旋轉一下,形狀就出來了。

27.png

讓咱們給每一個圓添加CSS樣式,仔細研究邀請函的圖片,咱們能夠看到一個圓的位置在左下角。知道了這一點,咱們就能夠寫出其餘與圓圈的旋轉角度。

28.png

每一個塊都有一個顏色,而且旋轉必定角度。下面的動畫動態展現了生成過程。

29.gif

有了上面這些原型,咱們給其餘形狀寫樣式。首先方形也能夠當作有不一樣圓角的圓。

30.png

當咱們定位了圓之後,咱們給了特定的旋轉角度和顏色。高興的是,相同的形狀也可使用相同的樣式,咱們寫好小形狀的樣式。

31.png

咱們把這些形狀設得小一些,而且離中心更遠的距離。而且使用跟上面相同的詭計。

小方塊


小的方形角度錯了,咱們須要給它旋轉45deg。

 

34.png

這裏有兩種方法可供選擇,咱們能夠給每一個方形加多一個額外的元素,並旋轉,或者咱們選擇CSS中的僞類。兩種方法都行,不過我更傾向於後者。

首先咱們把背景顏色,邊框,盒子陰影去掉。

35.png35.png

咱們使用::after僞類來建立一個相同的方形,並旋轉45deg。

36.png

如今咱們有了大圓和其餘小形狀了。

37.png

內容方塊


兩個大的方形包含全部內容,咱們把他們定位到中間,而且給他們一個比較深的透明色。

38.png

咱們能夠旋轉一下第一個大方形。

39.png

41.png

添加動畫


最初的邀請函是靜態的,可是咱們的網站叫作CSS Animation Rocks可不是浪得虛名。

我像把每一個集合分開,爲了作到這一點,我用span元素把它們分別包裹起來,後面就把動畫應用到span元素上便可。

42.png

 

咱們先給span元素定位,防止他們溢出。
45.png

每一個span元素都定位到中點。

接下來咱們把動畫應用到每一個span元素上面。

47.png

咱們使用了相同的keyframes可是改變了動畫時間,分別爲10s,20s,30s。因而他們一分鐘後回到原來的位置

keyframes 以下所示

48.png

開始位置旋轉角度爲0,最終旋轉角度360deg。

 

49.gif

重用CSS


這是個有趣的實驗,可是我以爲最大的收穫是重用了CSS.旋轉和小形狀使用相同的CSS很方便。還有全部的animation用了同一個keyframes。這樣有助於壓縮CSS文件的大小,保證加載速度。

前綴


建立這個例子的時候,我用了autoprefixer,這樣就不用每次寫動畫都要考慮瀏覽器內核了。

相關文章
相關標籤/搜索