September 13, 2018
August 31, 2018
August 23, 2018
最近做一個案子,並非一般型態的網站,必須大量使用程式碼來控制圖像位置與顯示,其中之一就是在 a:hover 或是其他元素 :hover 之下,同時指定多重指定一個以上的位置同時顯示不同元素,在以前一定要靠 Javascript +其他方式來寫,現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示,可以在上層加上區塊元素(div)使用 position 來做文字元素(i or a or span)定位相對位置,應該就可以解決了,當然這裡只是簡單的範例。
範例參考:點這裡
範例參考:點這裡
July 25, 2018
跟工程師討論後,他想要使用JavaScript來呈現動畫效果,我也有另外一套方式,將在行進中的動畫改變成不同圖片的方式,來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置(碰撞與否),但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗,可愛吧?!
▼這一個連貫的動作,由三張GIF所組合而成(因連動手機版版面限制。1.向右走至200px,2.向左走至0px,3.到原點踏步)
▼這一個連貫的動作,由三張GIF所組合而成(因連動手機版版面限制。1.向右走至200px,2.向左走至0px,3.到原點踏步)
June 7, 2018
May 28, 2018