作者yg1985 ()
看板Web_Design
标题[问题] 这个网页特效怎麽制作？
时间Mon Jun 1 11:57:25 2020
最一开始还没进网站的水滴画面，
第二个水滴画面，是一张png的图，不知道是css动画还是jquery？
和後面的年份圆圈翻过来，
要怎麽做出类似的？
目前只知道一开始有load 4个js档进来
http://www.taiyeng.com.tw/en/about
谢谢~~
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 60.245.65.135 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1590983847.A.DD9.html
※ 编辑: yg1985 (60.245.65.135 台湾), 06/01/2020 12:49:48
※ 编辑: yg1985 (60.245.65.135 台湾), 06/01/2020 13:35:58
1F：推 kentyeh: 水滴的部分跑太快看不出来，倒是下面年度圆圈年度(css:b 06/01 15:16
2F：→ kentyeh: order-radius:50%,X轴-100deg)，然後scroll到特定位置时 06/01 15:16
3F：→ kentyeh: ，script加入css aos-animate rule，在1.2秒内x轴翻正 06/01 15:16
4F：推 XDon: 把body下第一个div元素的pace-inactive改成pace-active 06/13 23:40
5F：→ XDon: 就可以让动画一直播~ 然後他的原理很简单, 水滴落下跟飞溅 06/13 23:40
6F：→ XDon: 效果看成两个部分 06/13 23:40
7F：→ XDon: 上半部只是一个装着水滴图片的element 06/13 23:40
8F：→ XDon: 让他不断执行落下并透明化的动画 06/13 23:40
9F：→ XDon: 下半部则是水花飞溅的动画, 两者时间上搭配好就可以了 06/13 23:40
10F：→ XDon: 实际上这个例子好像是用jQuery的动画+paeudo element 06/13 23:40
12F：推 XDon: 那个网站水滴落下後的飞溅效果则是透过border-radius画的椭 06/14 00:26
13F：→ XDon: 圆 06/14 00:26
14F：→ XDon: 这些都可以在pace-active里面的里面的pace-progress元素观 06/14 00:28
15F：→ XDon: 察到 06/14 00:28
16F：→ XDon: 更正,好像不是jQuery动画, 就一样是css keyframes 06/14 00:29