作者查詢 / XDon

總覽項目：發文 | 留言 | 暱稱

作者 XDon 在 PTT [ Web_Design ] 看板的留言(推文), 共13則

限定看板：Web_Design

首頁

尾頁

[ Web_Design ]16 留言, 推噓總分: +3

作者: yg1985 - 發表於 2020/06/01 11:57(5年前)

4^F推XDon: 把body下第一個div元素的pace-inactive改成pace-active06/13 23:40

5^F→XDon: 就可以讓動畫一直播~ 然後他的原理很簡單, 水滴落下跟飛濺06/13 23:40

6^F→XDon: 效果看成兩個部分06/13 23:40

7^F→XDon: 上半部只是一個裝著水滴圖片的element06/13 23:40

8^F→XDon: 讓他不斷執行落下並透明化的動畫06/13 23:40

9^F→XDon: 下半部則是水花飛濺的動畫, 兩者時間上搭配好就可以了06/13 23:40

10^F→XDon: 實際上這個例子好像是用jQuery的動畫+paeudo element06/13 23:40

11^F→XDon: 一個簡單的demo會像這樣 https://tinyurl.com/y7vy8nxq06/14 00:23

12^F推XDon: 那個網站水滴落下後的飛濺效果則是透過border-radius畫的橢06/14 00:26

13^F→XDon: 圓06/14 00:26

14^F→XDon: 這些都可以在pace-active裡面的裡面的pace-progress元素觀06/14 00:28

15^F→XDon: 察到06/14 00:28

16^F→XDon: 更正,好像不是jQuery動畫, 就一樣是css keyframes06/14 00:29

首頁

尾頁