这是一个创建于 655 天前的主题，其中的信息可能已经有所发展或是发生改变。
前端菜鸟想做个类似这样的图，但是不知道从何入手，请问这个动画（我猜两个建筑之间的光点会随着时间慢慢往后移动）是用什么插件生成的呢，感谢大佬们🤣
 |
1
xiaoxiaoming01 2023-03-14 16:07:16 +08:00  2
啊这
要优雅就用 canvas 画 粗暴点直接 div 糊就可以了 |
 |
2
Rrrrrr 2023-03-14 16:22:37 +08:00 1
直接做成动画不香吗？ lottie
|
 |
3
CHTuring 2023-03-14 16:27:51 +08:00 1
其实不用想那么多，直接做 GIF
|
 |
4
polarbearn 2023-03-14 16:31:33 +08:00 1
|
|
5
CHTuring 2023-03-14 16:33:42 +08:00 1
分解一下：
1. 左右两张图片可以共用一张 2. 用 css border 画一个圆，中间的光点相对定位，用 div overflow 遮照掉只保留上面的可是区域 3. 光点使用 css 动画配合 rotate 实现移动 用到的元素： 两个 div 用到的 css 属性： transform-origin: cernter transform: rotate(360deg) |
 |
6
shuxhan 2023-03-14 16:45:18 +08:00
问 ui 要个 gif
|
 |
7
rain0002009 2023-03-14 16:48:45 +08:00 1
让 UI 把曲线搞个 svg
然后 找个支持 svg 路径动画的插件 animejs https://animejs.com/documentation/#motionPath 或者 gsap https://svg-animation-booklet.vercel.app/chapter6.html#%E5%8A%A8%E8%B5%B7%E6%9D%A5 |
 |
8
tyrone2333 2023-03-14 16:51:07 +08:00 1
只做线条 gif 也就几十 k
|
 |
9
xuqiccr OP |
|
10
xiaoxiaoming01 2023-03-14 20:58:18 +08:00 1
|
|
11
xuqiccr OP @xiaoxiaoming01 #10 太强了！
|
 |
12
lizy0329 148 天前
AE 能够直接导出的，别自己做
|
Select Language