白前端速成：用HTML+CSS搞定蛇形扭动特效（附避坑指南）
白前端速成：用HTML+CSS搞定蛇形扭动特效（附避坑指南）
小白前端速成：用HTML+CSS搞定蛇形扭动特效（附避坑指南）
说真的，我到现在都记得第一次面试前端时被问的那个死亡问题："你做过什么有意思的视觉效果吗？"我当时脑子一抽，说我会用CSS画圆角按钮。面试官那个表情，就像是你跟他说你精通Word、Excel、PPT一样，那种礼貌中带着一丝怜悯的微笑，我至今难忘。
后来我才明白，前端这行，你光会搭页面就是工具人，得整点花活儿。但问题是，网上那些炫酷效果，点进去一看，好家伙，Three.js、WebGL、Shader，动不动就是几百行JS，我这种数学渣看了直接瞳孔地震。我就想啊，能不能用最基础的HTML+CSS，不搞那些高数级别的计算，整出一条会动的蛇来？就是那种，放在个人网站上，别人一看，哎哟不错哦，这小伙子有点东西，但其实代码简单到离谱的效果。
说干就干。我刚开始想着，这还不简单，找个蛇的SVG，加个CSS动画让它平移一下不就完了？结果做出来的东西像是PPT平移，僵硬得跟我周一早上起床一样。不行，得让它扭起来，得那种S形，妖娆的，有节奏感的扭动。
HTML结构怎么搭才不翻车
先说说这个HTML结构，这里头就有坑。我一开始图省事，想着一个div搞定，用border-radius画个长条，然后transform rotate一下不就扭了？天真了兄弟们。一个div旋转，那就是根棍子整体转，像个风扇叶片似的，哪有什么蛇形蠕动的感觉？
真正的秘诀是——你得把蛇切成一段一段的。就像动画片里，一帧一帧连起来才有动作。所以我的HTML结构长这样，简单粗暴但有效：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>纯CSS电子蛇</title><style>/* 基础重置，别让小蛇因为默认样式跑偏 */*{margin: 0;padding: 0;box-sizing: border-box;}body{background: #1a1a2e;/* 深色背景，显得高级 */display: flex;justify-content: center;align-items: center;min-height: 100vh;overflow: hidden;/* 防止动画出界出现滚动条 */}/* 蛇的容器，负责整体定位 */.snake-container{position: relative;width: 400px;height: 200px;/* border: 1px solid red; *//* 调试用，看容器边界 */}</style></head><body><divclass="snake-container"><!-- 蛇身由8节组成，数字可以改，越多越顺滑但性能越差 --><divclass="snake-segment"style="--i: 0;"></div><divclass="snake-segment"style="--i: 1;"></div><divclass="snake-segment"style="--i: 2;"></div><divclass="snake-segment"style="--i: 3;"></div><divclass="snake-segment"style="--i: 4;"></div><divclass="snake-segment"style="--i: 5;"></div><divclass="snake-segment"style="--i: 6;"></div><divclass="snake-segment"style="--i: 7;"></div></div></body></html>看到那个style="--i: 0;"了吗？这是CSS自定义属性，后面要用来算每个身体部位的动画延迟。你别嫌麻烦写8个div，这比你后面用JS算位置简单多了，而且性能还好。我试过用20个div，那蛇精细得跟真的一样，但在老安卓机上直接卡成幻灯片，所以8-12个是性价比最高的区间。
CSS动画核心：@keyframes 到底怎么写才不抽搐
好，结构搭好了，现在到了最玄学的地方——keyframes。我一开始写的是这种：
@keyframes twitch{from{transform:rotate(-20deg);}to{transform:rotate(20deg);}}结果你猜怎么着？那蛇抽得跟触电了一样，来回摆动完全没有那种流体的韵律感。问题在于，真实生物的扭动是有加速度的，不是匀速来回摆。它得有个预备动作，然后快速扭过去，再慢慢回正，这种节奏才自然。
后来我改成了这样，加入了中间状态，让运动曲线更柔和：
<style> .snake-segment{position: absolute;width: 50px;height: 50px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 50%;/* 圆形关节，衔接起来就是圆柱形身体 */left:calc(var(--i) * 45px);/* 每个关节错开45px，稍微重叠一点 */top: 50%;transform:translateY(-50%);/* 动画是关键 */animation: wiggle 2s ease-in-out infinite;/* 每个关节根据--i的值错开时间，这是波浪效果的核心 */animation-delay:calc(var(--i) * 0.15s);/* 加点阴影，让蛇有立体感 */box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);}@keyframes wiggle{0%, 100%{transform:translateY(-50%)rotate(-25deg)translateX(0);}25%{transform:translateY(-50%)rotate(0deg)translateX(10px);}50%{transform:translateY(-50%)rotate(25deg)translateX(0);}75%{transform:translateY(-50%)rotate(0deg)translateX(-10px);}} </style> 注意这里我用了translateY(-50%)，这是为了垂直居中，然后后面又跟了rotate。顺序很重要，CSS的transform是从右往左执行的，顺序错了你会发现旋转中心点完全不对，蛇就会开始跳太空步。
还有那个ease-in-out，千万别用linear，linear会让动画机械得像工厂流水线。ease-in-out有那种"起步慢-加速-减速停止"的感觉，生物运动都是这个节奏。你要是用了linear，出来的效果就像是在看80年代的机器人动画片。
transform-origin 和 rotate 的玄学配合
说到这个我就来气，当初调试这个transform-origin调了我两个小时。你知道那种痛苦吗？明明代码看起来都对，但蛇就是不在你想要的位置旋转，要么飞出去，要么原地打转像个陀螺。
问题的根源在于，CSS里默认的旋转中心是元素的中心点（center center），但蛇的关节连接处是在边缘啊！你想象一下，如果每个关节都在自己中心旋转，那它们就会互相脱节，各自为政。你得让它们绕着连接点转，这样身体才能连贯起来。
<style> .snake-segment{position: absolute;width: 60px;height: 40px;background:linear-gradient(to right, #4facfe 0%, #00f2fe 100%);border-radius: 20px;left:calc(var(--i) * 35px);top: 50%;/* 重点来了！改变变换原点 */transform-origin: left center;/* 让旋转绕着左边缘中心进行 */transform:translateY(-50%);animation: slither 3s ease-in-out infinite;animation-delay:calc(var(--i) * 0.1s);}@keyframes slither{0%, 100%{transform:translateY(-50%)rotate(-30deg);}50%{transform:translateY(-50%)rotate(30deg);}}/* 头部特殊处理，让它大一点，圆一点 */.snake-segment:first-child{background:linear-gradient(to right, #fa709a 0%, #fee140 100%);z-index: 10;/* 确保头部在最上层 */transform-origin: center center;/* 头部可以在中心转，因为不需要连接前面 */} </style> 看到transform-origin: left center;了吗？这就是关键。每个身体段（除了头部）都绕着左边中心点旋转，这样当它转动时，右边就会上下摆动，正好连接到下一个身体段。你把这行注释掉试试，立马变成恐怖片，各节身体满天乱飞。
还有个坑，当你写了transform-origin之后，如果再写translateY(-50%)，你会发现垂直居中又跑偏了。因为transform-origin改变了坐标系，这时候你需要调整top值，或者改用flex布局来定位。我上面的代码其实偷了个懒，用绝对定位+left/top硬怼的，生产环境建议用flex，兼容性更好。
为什么你的蛇动起来像抽筋？——常见节奏问题大排查
如果你按照上面的代码写了，但发现蛇动起来还是一顿一顿的，像得了帕金森，别急，我们来排查几个常见翻车点。
首先是animation-delay的计算问题。我一开始写成了calc(var(--i) * 0.1s)，看起来没问题，但当蛇节数很多时，最后面的节延迟太久了，导致蛇身拉得太开，像条被抻长的橡皮筋。后来我把延迟时间改成了calc(var(--i) * -0.1s)，负延迟！这样可以让后面的节提前开始动画，反而能制造出追随身的效果。这个技巧很多人不知道，负延迟在CSS动画里是合法的，而且有时候比正延迟好用。
<style> .snake-segment{/* ... 其他样式 ... */animation: wave 2s ease-in-out infinite;/* 负延迟，让后面的节提前开始，形成追赶效果 */animation-delay:calc(var(--i) * -0.15s);}@keyframes wave{0%, 100%{transform:translateY(-50%)rotate(-20deg);}50%{transform:translateY(-50%)rotate(20deg);}} </style> 其次是缓动函数的选择。我前面说了别用linear，但ease-in-out有时候也不够自然。你可以试试cubic-bezier(0.45, 0, 0.55, 1)，这是我自己调出来的一个贝塞尔曲线，比默认的ease-in-out更柔和，有那种"黏液"感，对，就是那种蛇应有的黏糊糊的质感。
还有一个隐藏大坑——浏览器的刷新率。如果你的动画时长设置得太短，比如0.5秒一个循环，在144Hz的显示器上看着还行，但在60Hz的老显示器上就会显得特别急促。建议动画时长设置在2-4秒之间，这样既不会让人等得不耐烦，又不会显得抽搐。而且记得加上will-change: transform，虽然这是把双刃剑，后面我会细说。
让每一段身体错开时间动：animation-delay 的妙用
这部分值得单独拎出来说，因为这是整个波浪效果的核心科技。原理其实很简单：如果所有节同时摆动，那就是一根棍子在转；如果每节都比前一节晚一点点开始，就会形成传播的波形，就像操场上的波浪舞一样。
<style> .snake-container{display: flex;align-items: center;gap: -10px;/* 负间距让关节重叠 */}.snake-segment{width: 50px;height: 50px;background:radial-gradient(circle at 30% 30%, #ff6b6b, #c92a2a);border-radius: 50%;position: relative;/* 基础动画 */animation: ripple 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;/* 核心：错开时间 */animation-delay:calc(var(--i) * -0.2s);/* 防止动画重置时的跳变 */animation-fill-mode: both;}@keyframes ripple{0%{transform:translateY(0)scale(1);opacity: 0.8;}50%{transform:translateY(-30px)scale(1.1);opacity: 1;filter:brightness(1.2);/* 上升到最高点时变亮 */}100%{transform:translateY(0)scale(1);opacity: 0.8;}}/* 还可以加个身体变细的效果，更像蛇 */.snake-segment::after{content:'';position: absolute;width: 20px;height: 100%;background: inherit;right: -10px;top: 0;border-radius: 50%;opacity: 0.6;} </style> 这里我用了calc(var(--i) * -0.2s)，负值很重要，它表示"提前开始"。想象一下，第8节比第0节提前了1.6秒开始动画，当第0节刚开始向上摆时，第8节已经在下落了，这样就形成了连续的波形传递。
还有个骚操作，你可以给奇数节和偶数节不同的动画时长，制造出更复杂的节奏：
<style> .snake-segment:nth-child(odd){animation-duration: 2s;background: #e74c3c;}.snake-segment:nth-child(even){animation-duration: 2.3s;/* 稍微错开频率 */background: #c0392b;} </style> 这样蛇身就会有那种"一节快一节慢"的蠕动感，像真蛇在爬行时的肌肉收缩。虽然看起来有点鬼畜，但确实很生物。
从直线蠕动到S形扭动：进阶路径控制思路
前面我们做的都是上下摆动，像条蛇在原地扭秧歌。但真正的蛇是S形前进的，也就是左右扭动同时整体前进。这个用纯CSS也能做，但需要更精细的控制。
思路是这样的：我们不能让每个节都只在垂直方向摆动，而是要让它们的摆动相位差形成S形。简单说，就是第一节向左摆时，第二节向右摆，第三节又向左…这样连起来就是S形。然后整体再做一个水平移动的动画。
<style> .snake-wrapper{position: relative;width: 100%;height: 300px;overflow: hidden;}.snake-body{position: absolute;left: -100px;/* 从屏幕外开始 */top: 50%;display: flex;align-items: center;/* 整体移动动画 */animation: crawl 8s linear infinite;}.snake-segment{width: 40px;height: 40px;background:linear-gradient(45deg, #00b894, #00cec9);border-radius: 50%;margin-right: -5px;/* 稍微重叠 *//* 每个节的摆动动画，相位错开180度形成S形 */animation: s-wave 1s ease-in-out infinite alternate;animation-delay:calc(var(--i) * 0.1s);/* 这里的关键是alternate，让动画来回播放 */}@keyframes crawl{0%{transform:translateX(0)translateY(-50%);}25%{transform:translateX(300px)translateY(-50%)translateY(-20px);}50%{transform:translateX(600px)translateY(-50%)translateY(20px);}75%{transform:translateX(900px)translateY(-50%)translateY(-20px);}100%{transform:translateX(1200px)translateY(-50%);}}@keyframes s-wave{0%{transform:translateY(-10px);border-radius: 40% 60% 60% 40%;/* 压扁一点，像真的蛇身 */}100%{transform:translateY(10px);border-radius: 60% 40% 40% 60%;}}/* 让蛇头始终朝向运动方向 */.snake-segment:first-child{background: #fdcb6e;position: relative;}/* 画两个眼睛 */.snake-segment:first-child::before, .snake-segment:first-child::after{content:'';position: absolute;width: 8px;height: 8px;background: #2d3436;border-radius: 50%;top: 30%;}.snake-segment:first-child::before{left: 20%;}.snake-segment:first-child::after{right: 20%;} </style> <div class="snake-wrapper"> <div class="snake-body"> <div class="snake-segment" style="--i: 0;"></div> <div class="snake-segment" style="--i: 1;"></div> <div class="snake-segment" style="--i: 2;"></div> <div class="snake-segment" style="--i: 3;"></div> <div class="snake-segment" style="--i: 4;"></div> <div class="snake-segment" style="--i: 5;"></div> <div class="snake-segment" style="--i: 6;"></div> <div class="snake-segment" style="--i: 7;"></div> <div class="snake-segment" style="--i: 8;"></div> <div class="snake-segment" style="--i: 9;"></div> </div> </div> 这里有两个动画在同时作用：一个是.snake-body的整体平移（crawl），另一个是每节的上下摆动（s-wave）。通过alternate关键字，s-wave会在0%和100%之间来回往复，配合错开的delay，就形成了S形波浪。
有个细节注意看，我改变了border-radius的值，让蛇身在摆动时边缘跟着变形，这样更有"肉感"，而不是硬邦邦的圆球在动。这种微细节往往就是"看着还行"和"卧槽牛逼"之间的差别。
性能别崩！用 will-change 和 transform3d 提升流畅度
好了，效果实现了，但如果你在上面那段代码里加了20个蛇节，在手机上可能已经感觉到卡顿了。特别是安卓机，那种几百块的入门机，CPU渲染这个动画能卡出屎来。
这时候就要请出硬件加速三件套了：will-change、transform: translate3d()、还有backface-visibility。
<style> .snake-segment{/* ... 基础样式 ... *//* 告诉浏览器，这个元素要变化了，提前准备GPU层 */will-change: transform;/* 强制开启硬件加速，哪怕只是2D变换也骗浏览器说是3D的 */transform:translate3d(0, 0, 0)translateY(-50%);/* 防止渲染时的闪烁问题 */backface-visibility: hidden;/* 如果有透视效果可以加这个，纯2D动画可以不加 */perspective: 1000px;}/* 动画结束后回收资源，防止内存泄漏 */.snake-segment:hover{will-change: auto;} </style> will-change是把双刃剑。用好了丝般顺滑，用多了内存爆炸。原则是：只在动画元素上加，动画结束后及时移除（可以通过JS监听animationend事件，或者简单点用:hover来重置）。我上面代码里写了:hover时重置，其实不太严谨，更好的做法是用JS控制，但既然是纯CSS方案，我们就简单处理。
translate3d(0, 0, 0)这个hack很多人都知道，它强制浏览器创建一个新的复合层（compositing layer），让GPU来负责渲染，CPU只负责计算位置。在移动端，这往往是60fps和30fps的分水岭。
但要注意，不要给所有元素都加这个，图层太多GPU也吃不消。通常只给同时运动的元素加，静态的装饰元素没必要。
移动端适配翻车实录：iOS Safari 又双叒叕不听话了
说到移动端，iOS Safari简直就是前端开发者的噩梦工厂。你一切看起来都好好的，在Chrome DevTools里模拟iPhone也正常，但真机一测，bug来了。
首先是border-radius配合transform时的锯齿问题。iOS Safari的渲染引擎有时候会很奇怪地把你完美的圆角给裁出锯齿来，看起来特别廉价。解决方案是加个transform: translateZ(0)，或者给父容器加个overflow: hidden并设置border-radius。
然后是animation-delay的负值支持。大部分现代浏览器都支持负delay，但iOS 13以下的Safari有时候会有bug，表现为动画直接从中间开始，而不是我们想要的"提前状态"。如果你要兼容老iOS，可能需要调整策略，用正delay配合animation-fill-mode: backwards。
还有最坑的——iOS的省电模式。一旦用户开了省电模式，iOS会强行把CSS动画的帧率降到30fps，你的丝滑小蛇瞬间变成PPT。这没办法，系统级限制，但你可以通过@media (prefers-reduced-motion: reduce)来检测用户是否偏好减少动画，然后提供一个静态的优雅降级版本：
<style> /* 默认动画 */.snake-segment{animation: wiggle 2s ease-in-out infinite;}/* 如果用户开了省电模式或设置了减少动画 */@media(prefers-reduced-motion: reduce){.snake-segment{animation: none;/* 提供一个静态的弯曲姿态 */transform:translateY(-50%)rotate(calc(var(--i) * 5deg - 20deg));}}/* iOS Safari特有的修复 */@supports(-webkit-touch-callout: none){.snake-segment{/* iOS特有属性，防止点击时的灰色高亮 */-webkit-tap-highlight-color: transparent;/* 修复圆角锯齿 */transform:translate3d(0,0,0);border: 0.5px solid transparent;}} </style> 另外，iOS的viewport缩放也会影响动画性能。如果你设置了user-scalable=no，有时候动画反而更卡，因为浏览器优化策略不同。建议保持默认缩放，或者通过JS控制缩放级别。
还有个小细节，iOS上position: fixed和transform一起用时，z-index可能会失效，你的蛇可能会跑到某些元素下面。这时候需要给父容器也加个transform: translateZ(0)提升层级，或者调整DOM结构，让蛇的容器尽量靠后。
加点料：给蛇加眼睛、渐变色、甚至呼吸灯效果
基础动画搞定后，就是让人眼前一亮的细节时间了。一条纯色的蛇太朴素了，得像游戏里的装备一样，加点特效。
首先是渐变色。别再用纯色了，2024年了，渐变才是正义。但要注意的是，如果你给每个节都设置了不同的渐变方向，动起来会显得花花绿绿很乱。建议统一用线性渐变，但让方向随着动画变化：
<style> .snake-segment{background:linear-gradient( 90deg, #667eea 0%, #764ba2 50%, #f093fb 100% );background-size: 200% 200%;animation: wiggle 2s ease-in-out infinite, gradient-shift 3s ease infinite;}@keyframes gradient-shift{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100%{background-position: 0% 50%;}}/* 头部加眼睛 */.snake-segment:first-child{background:radial-gradient(circle at 30% 30%, #ffeaa7, #fdcb6e);box-shadow: 0 0 20px rgba(253, 203, 110, 0.6), inset -5px -5px 10px rgba(0,0,0,0.1);}/* 用伪元素画眼睛 */.snake-segment:first-child::before, .snake-segment:first-child::after{content:'';position: absolute;width: 10px;height: 10px;background: #2d3436;border-radius: 50%;top: 35%;box-shadow: 0 0 5px rgba(0,0,0,0.3);animation: blink 4s infinite;/* 眨眼动画 */}.snake-segment:first-child::before{left: 25%;}.snake-segment:first-child::after{right: 25%;}@keyframes blink{0%, 96%, 100%{transform:scaleY(1);}98%{transform:scaleY(0.1);}/* 快速闭眼 */}/* 呼吸灯效果 - 身体发光 */.snake-segment{box-shadow: 0 0 10px rgba(102, 126, 234, 0.5), 0 0 20px rgba(102, 126, 234, 0.3), 0 0 30px rgba(102, 126, 234, 0.1);animation: wiggle 2s ease-in-out infinite, breathe 2s ease-in-out infinite;}@keyframes breathe{0%, 100%{box-shadow: 0 0 10px rgba(102, 126, 234, 0.5), 0 0 20px rgba(102, 126, 234, 0.3);}50%{box-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 0 40px rgba(102, 126, 234, 0.5), 0 0 60px rgba(102, 126, 234, 0.3);}} </style> 看那个blink动画，就是让眼睛偶尔眨一下，瞬间就有灵性了。注意眨眼的时间要随机一点，或者至少周期要长（4秒），不然像个机器人一样规律眨眼也很可怕。
呼吸灯效果其实就是改变box-shadow的扩散范围和透明度，模拟生物发光或者魔法效果。如果你要做赛博朋克风格的蛇，可以把颜色改成青色（#00ffff）和紫色（#ff00ff），再加个filter: hue-rotate()动画让颜色流动，效果炸裂。
偷偷告诉你：这套思路还能做波浪文字、蠕动进度条、甚至贪吃蛇背景
最后这部分是拓展思路。你学会了蛇形动画的核心原理——分段、错开延迟、波形传递——这套东西能用在无数地方。
比如波浪文字，原理一模一样：
<style> .wave-text span{display: inline-block;animation: wave 1s ease-in-out infinite;animation-delay:calc(var(--i) * 0.05s);}@keyframes wave{0%, 100%{transform:translateY(0);}50%{transform:translateY(-20px);}} </style> <h1 class="wave-text"> <span style="--i:0">H</span> <span style="--i:1">e</span> <span style="--i:2">l</span> <span style="--i:3">l</span> <span style="--i:4">o</span> </h1> 每个字母都是一个span，延迟递增，就能做出那种抖音上很火的波浪文字效果。
再比如进度条，不用那种干巴巴的线性增长，让进度条像蛇一样蠕动前进：
<style> .snake-progress{width: 300px;height: 20px;background: #dfe6e9;border-radius: 10px;overflow: hidden;position: relative;}.snake-bar{height: 100%;width: 30%;/* 当前进度 */background:linear-gradient(90deg, #00b894, #00cec9);position: relative;animation: progress-grow 2s ease-out forwards;}/* 在进度条末端加个蠕动的装饰 */.snake-bar::after{content:'';position: absolute;right: -10px;top: -5px;width: 30px;height: 30px;background:radial-gradient(circle, #00cec9, transparent);border-radius: 50%;animation: pulse 0.8s ease-in-out infinite;}@keyframes pulse{0%, 100%{transform:scale(1);opacity: 1;}50%{transform:scale(1.2);opacity: 0.7;}} </style> 甚至可以做整个页面的背景，让多条半透明的蛇在底层缓慢蠕动，营造出那种神秘的氛围。给它们加上pointer-events: none和很低的opacity，不会影响用户操作，但视觉冲击力很强。
再变态一点，结合CSS变量和JS（虽然我们说纯CSS，但加一点JS控制变量不算犯规），你可以让蛇跟随鼠标方向转动。用JS计算鼠标位置，更新CSS变量--mouse-x和--mouse-y，然后在keyframes里用calc()来引用这些变量，实现交互式动画。这个就留给你们当课后作业了，提示一下：主要用atan2函数算角度，然后赋值给--rotate变量。
总之，这种"时间错开+简单变换"的思路是CSS动画的精髓。不用搞什么复杂的数学，也不用WebGL，就能做出看起来很高端的效果。下次面试官再问你有什么作品，直接掏出手机给他看这个扭动的蛇，然后轻描淡写地说：“哦，这个啊，就用了十几个div，纯CSS，没写一行JS，性能优化到能在老人机上跑60帧。” 看他表情，绝对比你讲半天React源码分析管用。
代码全给你了，坑也帮你踩过了，剩下的就是复制粘贴改颜色，然后发给你的产品经理或者面试官看。记得把注释删掉，显得你写得很熟练的样子。开个玩笑，注释留着吧，显得专业。去试试吧，搞不定的话… 那可能是你的浏览器太老了，建议换个Chrome。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
