这是一个创建于 87 天前的主题，其中的信息可能已经有所发展或是发生改变。
前端菜鸟想做个类似这样的图，但是不知道从何入手，请问这个动画（我猜两个建筑之间的光点会随着时间慢慢往后移动）是用什么插件生成的呢，感谢大佬们🤣
 |
1
xiaoxiaoming01 87 天前  2
啊这
要优雅就用 canvas 画 粗暴点直接 div 糊就可以了 |
 |
2
Rrrrrr 87 天前 1
直接做成动画不香吗？ lottie
|
 |
3
CHTuring 87 天前 1
其实不用想那么多，直接做 GIF
|
 |
4
polarbearn 87 天前 1
|
|
5
CHTuring 87 天前 1
分解一下：
1. 左右两张图片可以共用一张 2. 用 css border 画一个圆，中间的光点相对定位，用 div overflow 遮照掉只保留上面的可是区域 3. 光点使用 css 动画配合 rotate 实现移动 用到的元素： 两个 div 用到的 css 属性： transform-origin: cernter transform: rotate(360deg) |
 |
6
shuxhan 87 天前
问 ui 要个 gif
|
 |
7
rain0002009 87 天前 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 87 天前 1
只做线条 gif 也就几十 k
|
 |
9
xuqiccr OP |
|
11
xuqiccr OP @xiaoxiaoming01 #10 太强了！
|
Select Language