网页也能一刀两断?这个开屏动画有点小帅

合集 · 前端教程 (23)

  1. 10:23
    【前端 | 教程】如何做一个扑克牌轮播图
  2. 7:22
    【前端 | 教程】实现酷酷的文字故障效果
  3. 8:13
    【前端 | 教程】纯干货!三步实现滑动阻尼效果
  4. 10:25
    【前端 | Lottie】如何将AE动画渲染到网页上?
  5. 8:25
    前端还能这样玩?做一只顶级走位的小蜘蛛
  6. 9:06
    你的网站或许离高级,,还差一个跳转动画?
  7. 9:30
    何止竖向滑动?让你的网页横着走!
  8. 12:32
    干到开裂!上下左右⚡网页无限滑动⚡
  9. 11:56
    做一个网页信息表单:不仅可以打勾,还可以擦掉?
  10. 7:57
    硬到牙疼!如何将SVG图形嵌入网页、优雅地做动画?
  11. 7:26
    网页SVG描边效果?一段动画给你整明白
  12. 6:16
    你最该学会的网页交互?SVG描边动画 + 按钮
  13. 7:57
    最具科技感的一集?用SVG打造网页矩阵动画
  14. 8:33
    全站首发!别再问哪找网页灵感了,AW保姆级教程
  15. 7:15
    不用物理引擎?让网页小球附加🧲磁力效果🧲
  16. 7:48
    一个让人猜不到原理的,,网页小蛇加载效果?
  17. 6:34
    终!极!网页横向滑动效果📕教程📕
  18. 6:24
    再花里胡哨一点?在网页里使用ASCII动画
  19. 8:09
    手搓物理效果?详解大神写的前端代码
  20. 6:33
    音频可视化第一步?无库实现网页音波环
  21. 5:40
    “自瞄锁敌”?做一个带有磁力的网页光标
  22. 6:10
    网页也能一刀两断?这个开屏动画有点小帅
  23. 6:14
    另类切图法?当CSS不按套路出牌
Description
源代码链接:https://github.com/JIEJOE-WEB-Tutorial/019-slash-loading
视频中的原效果网页演示:BV1jqEj6oEaE
GSAP timeline官方文档:https://gsap.com/docs/v3/GSAP/Timeline
MDN clip-path官方文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/clip-path
喜欢这个视频的话,就点个赞吧❤

Comments

Xuas_key 2026-07-01

我还以为是这个

♥ 14 ↩ 2

洋洋网233 2026-07-07

效果很不错,接下来兼容一下IE吧[doge]

♥ 8 ↩ 1

Willfulchip 2026-07-01

up真神了,又学到了[喜欢]

♥ 3 ↩ 1

摸鱼开发局 2026-07-08

挺好,还是有人会做这种有特殊风格的网页,还是很有趣。

♥ 2 ↩ 1

陽剣ヴォラキア 2026-07-01

第一[星星眼]

♥ 2 ↩ 1

蓝易云 2026-07-07

[蹲蹲][蹲蹲][蹲蹲][蹲蹲]

♥ 1 ↩ 1

玛琪玛小姐 2026-07-07

好牛的思路,学到了

♥ 1 ↩ 1

Heisenberg_Louis 2026-07-01

每期都在,我是jiejoe小迷弟[星星眼]

♥ 1 ↩ 1

Dopex3 2026-07-01

又学到了[星星眼]

♥ 1 ↩ 1

墨梓柒IceSakurary 2026-07-01

来了来了[星星眼]

♥ 1 ↩ 1

芜湖の刁德一 2026-07-07

先在动画制作工具把动画做好,像这个demo纯svg就可以了,再导出然后把动画的播放时间轴和前端页面某些时间节点组成的时间轴两者关联,然后播放

♥ 1 ↩ 1

尘埃星海光 2026-07-01

[星星眼][星星眼]

♥ 1 ↩ 1

猪建森 2026-07-01

有点意思[吃瓜][doge]

♥ 1 ↩ 1

阿巴阿巴我会编程 2026-07-05

?你是在为斩神2打广告嘛?[吃瓜][吃瓜][吃瓜]

↩ 2

封尘决恋 2026-07-22

好的

logan6081 2026-07-01

前端滴神!

↩ 3