这个动效怎么实现的呢?

2020-05-31 20:30:06 +08:00
 selfcreditgiving

https://www.youtube.com/watch?v=isZhC5YpzDM&feature=youtu.be

视频可能看不是很清楚,可以去这个网站看看 http://topology.le5le.com/

看都这个彗星流向效果的动画,自己尝试了一下没有做出来,有谁知道这个用前端的技术( svg 、canvas 、keyframe 等)应该怎么实现呢。

流动的红线在转弯的时候,不是直接 rotate 90deg, 我猜想是一个个的圆连成的一条,用到了一个渐变色,但是自己没试出来。

1427 次点击
所在节点    问与答
3 条回复
selfcreditgiving
2020-05-31 20:33:30 +08:00
好像不能插入视频啊
delectate
2020-05-31 23:19:50 +08:00
svg 可以。google 一艘就有: https://css-tricks.com/svg-line-animation-works/
selfcreditgiving
2020-05-31 23:34:48 +08:00
@delectate #2 多谢回复。单是画线( path )这个我倒是知道的,这个动效里,会运动的那个东西其实比路径的线要宽一点,可能录屏看的不太清晰,还有一个彗星彗尾的效果(头部颜色深,尾部浅),可能需要叠加两条一粗一细两条线吧,可是类似彗星的效果还没什么思路。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/677271

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX