作者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/cn.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