最具科技感的一集？用SVG打造网页矩阵动画

JIEJOE_轻敲代码

合集 · 前端教程 (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 
立即行动！参与文心快码（Baidu Comate）官网活动，免费领取百度网盘月卡+文心快码专业版月卡！
https://dwz.cn/duPpkC4k 🚀 点击链接，安装并使用文心快码，开启智能编程！
源代码链接：https://pan.baidu.com/s/1ooDPr9YYGPB4KdAe2zJluw 
提取码：jiej
GSAP官网文档: https://gsap.com/docs/v3/
SVG描边动画教程: BV1dH4y1n7cF
喜欢这个视频的话，就点个赞吧❤

Comments

狸哩粒 2024-08-28

🐮的，接广子了

♥ 12 ↩ 1

JIEJOE_轻敲代码 2024-08-29

宝子们[脱单doge]，如果对视频里面的文心快码感兴趣的话，可以点击简介区链接安装哟，最近他们说是在搞活动，激活后好像可以领取文心快码的专业版月卡还有百度网盘的会员月卡[龙年][龙年] 传送门🚪: 1. 00:45 引入SVG的defs资源polygon六边形 2. 01:35 以六边形为基本单位用JS构建蜂窝矩阵 3. 04:38 用GSAP控制所有六边形实现矩阵动画

♥ 5

BIG份红烧肉 2024-08-29

恭喜恰饭！[星星眼][星星眼]

♥ 2

xiaochen004hao 2025-12-10

现在文心我觉得不好用惹，我现在用千问[doge_金箍] 当然如果有复杂问题我也会利用漏洞去免费薅Gemini3pro啊opus啊的羊毛的[响指]

♥ 1 ↩ 1

鱼呀鱼鱼鱼我 2024-08-28

感觉比问GPT方便好多呀

♥ 1 ↩ 1

mecil9 2025-07-28

up主，我对你项目中下方的那些方块比较感兴趣，是svg还是css搞的？

↩ 1

不羡云朵不羡羽 2024-09-19

太厉害了[doge][doge][doge]

↩ 1

唱给自己听 2024-09-12

请问一下，有个问题，就是退出动画的时候，六边形下边的边框颜色会直接消失是怎么回事呢

↩ 3

lsang66 2024-08-29

[doge_金箍]

↩ 1

mircool 2024-08-29

源码是不是放错了,效果不对啊,一条大虫子转圈圈

↩ 2

ZombieBrand 2024-08-29

和通义千问有哪些特点和优势么

↩ 1

M1sty_n3oN 2024-08-28

正好用的上！[星星眼]

↩ 1