[問題] CSS3可以有超過兩個pseudo elements嗎

[content71 (羅莉飼養中...)]

《前提》
希望全部都在 css 裡面解決
這樣我在 html 裡面只要套用一個 class 就可以重複運用


《目標》
要做一些 border animation
不過 border 有四個邊
pseudo elements 我所知只有 :before, :after 兩個
請問有辦法設定四個嗎

範例如下
http://codepen.io/anon/pen/PZZQog
(範例裡面只有上下邊，但我想多做左右邊）

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 116.87.43.238
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1450241261.A.5BB.html
推 iamnodoubt: 就只有兩個,最接近你要的可行性解法是,把svg放進
→ iamnodoubt: pseudo的content,然後改變stroke-dashoffset去做動畫
→ iamnodoubt: 跟做svg動畫是一樣的,只是svg跟一般dom的選取起來操作
→ iamnodoubt: 有點不太一樣就是了,其實一個div做出很多樣的圖型,除
→ iamnodoubt: 了pseudo元素之外, 很多都是用box-shadow去模擬出來的
謝謝回覆，svg我也有去研究過
不過我要的動態效果是完全跟scroll位置結合
(也就是 scroll 到中間的話，動畫也會停在中間)
而不是在某個點觸發整個動畫
svg 也可以做這個嗎
另外想問，svg 會有瀏覽器支援的問題嗎
http://caniuse.com/#search=svg
這裏看起來是有點狀況但又不是很確定就是了
※ 編輯: content71 (116.87.43.238), 12/17/2015 03:42:32
推 iamnodoubt: 當然可以啊,如果你觀念有通的話,parallax原理你有辦法
→ iamnodoubt: 手刻的話,說真的,你要畫面酷炫,又要簡單辦到,沒這回事
→ iamnodoubt: 很多動畫都是苦工時間累積出來的...