作者content71 (羅莉飼養中...)
看板Web_Design
標題[問題] CSS3可以有超過兩個pseudo elements嗎
時間Wed Dec 16 12:47:36 2015
《前提》
希望全部都在 css 裡面解決
這樣我在 html 裡面只要套用一個 class 就可以重複運用
《目標》
要做一些 border animation
不過 border 有四個邊
pseudo elements 我所知只有 :before, :after 兩個
請問有辦法設定四個嗎
範例如下
http://codepen.io/anon/pen/PZZQog
(範例裡面只有上下邊，但我想多做左右邊）
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 116.87.43.238
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1450241261.A.5BB.html
1F：推 iamnodoubt: 就只有兩個,最接近你要的可行性解法是,把svg放進 12/16 23:16
2F：→ iamnodoubt: pseudo的content,然後改變stroke-dashoffset去做動畫 12/16 23:18
3F：→ iamnodoubt: 跟做svg動畫是一樣的,只是svg跟一般dom的選取起來操作 12/16 23:19
4F：→ iamnodoubt: 有點不太一樣就是了,其實一個div做出很多樣的圖型,除 12/16 23:20
5F：→ iamnodoubt: 了pseudo元素之外, 很多都是用box-shadow去模擬出來的 12/16 23:21
謝謝回覆，svg我也有去研究過
不過我要的動態效果是完全跟scroll位置結合
(也就是 scroll 到中間的話，動畫也會停在中間)
而不是在某個點觸發整個動畫
svg 也可以做這個嗎
另外想問，svg 會有瀏覽器支援的問題嗎
http://caniuse.com/#search=svg
這裏看起來是有點狀況但又不是很確定就是了
※ 編輯: content71 (116.87.43.238), 12/17/2015 03:42:32
6F：推 iamnodoubt: 當然可以啊,如果你觀念有通的話,parallax原理你有辦法 12/17 23:31
7F：→ iamnodoubt: 手刻的話,說真的,你要畫面酷炫,又要簡單辦到,沒這回事 12/17 23:32
8F：→ iamnodoubt: 很多動畫都是苦工時間累積出來的... 12/17 23:32