作者cowcowjerry (阿牛)
看板Web_Design
標題[問題]css3 @keyframe 裡面 背景用2張gif 替換
時間Wed Dec 23 18:55:46 2015
請問我有兩張gif圖 當成DIV裡面的background-image
第一張是導覽頁動畫 長度5秒 只設定播放一次
第二章是接導覽頁動畫結束的畫面 長度3秒 設定一直重複
請問可以純粹用css3 @keyframe 動畫作設定嗎?
例如
gif-animate{
0%{background-image:url(a.gif);}
99.9%{background-image:url(a.gif);}
100%{background-image:url(b.gif);}
}
我自己試了好像不行~"~
因為不能用FLASH ， 但不知道用HTML&CSS3 怎麼寫....
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.237.231.251
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1450868149.A.E65.html
1F：→ sorarize: 手機沒辦法測你說的，不過你可以用兩個 div 設 opacity 12/23 20:25
2F：→ cowcowjerry: 我有試用兩div,但是他們會上下並排，不能重疊，設z-d 12/23 20:37
3F：→ cowcowjerry: epath,下層看不到耶，就算上層透明度0了 12/23 20:37
4F：推 iamnodoubt: 就5秒後用js把background-image換成b.gif,動畫部分 12/23 20:41
5F：→ iamnodoubt: gif已經處理完了, 又不是用語法去做動畫的,單純換圖片 12/23 20:42
6F：→ cowcowjerry: 不會寫JS阿 Q_Q 12/23 21:32
7F：→ sorarize: 要用兩個 div 的話 外面再包一層設 position relative 12/23 21:39
8F：→ sorarize: 裡面兩個設 position absolute 就可以重疊了 12/23 21:40
9F：→ Hevak: 兩個div外面加一個div包起來，外面的div設position: relati 12/23 21:41
10F：→ sorarize: 然後外面那層要設寬高把空間撐出來 12/23 21:41
11F：→ Hevak: ve;，裏面的兩個div設position: absolute;就會疊 12/23 21:41
12F：→ Hevak: 可惡慢了=_= 12/23 21:41
13F：→ sorarize: XDDD 12/23 21:50
14F：→ cowcowjerry: ㄚㄚ成功了 謝謝大大門 12/23 22:02
15F：→ sorarize: 對了 只用一個 div 搭配偽元素應該也可以？ 12/24 05:50