前端萌新别慌！用HTML+CSS手搓一个会呼吸的"科技之眼"特效

这玩意儿真不是AI画的，是咱一行代码一行代码堆出来的

前几天刷某书，看到满屏的"AI生成赛博朋克眼睛"、“Midjourney科技眼球”，我当场就emo了。不是，凭啥咱前端就被扣上"只会写表单"的帽子啊？HTML+CSS难道就不配拥有姓名吗？我偏不信这个邪，连夜撸了一个纯CSS写的"科技之眼"，发群里之后那帮后端居然问我：“这图哪儿下载的？”

我：？？？兄dei，这tm是我一行一行code出来的好吗！

其实吧，前端圈子里特别喜欢搞眼睛特效，这事儿仔细想想挺有意思的。你说做个爱心、做个星星不行吗？偏不，就得是眼睛。可能是程序员的自我投射？毕竟我们天天盯着屏幕看bug，眼睛都快瞎了，所以对眼睛有种特殊的执念。再者说了，眼睛这东西做好了特别唬人，瞳孔收缩、虹膜纹理、高光反光，稍微加点动画就显得贼高级，关键是——它其实没你想的那么难。

而且你发现一个规律没？眼睛是最好"糊弄"用户的。做网页要是对称的图形，稍微有点偏差用户一眼就看出来了；但眼睛不一样，两只眼本来就长得不一样大（不信你照镜子），所以哪怕你写出来的CSS左右差了2个像素，别人只会觉得："哇好艺术！"而不会说：“你这代码有bug啊不对称”。这简直是我们这种强迫症的福音好吗！（虽然其实暗地里我还是会用PS量一下确保差不多hhh）

先瞅瞅这"科技之眼"到底用了哪些前端骚操作

别被那些花里胡哨的特效吓到，拆开来看其实就是几个div套娃，再加上CSS的魔法滤镜。核心思路跟叠buff一样，一层一层往上糊。

HTML结构简单到离谱，就是个洋葱式嵌套：最外层是个眼眶，里面套虹膜，虹膜里面再套瞳孔，瞳孔里面可能再塞个高光。没了。什么？你说得用canvas？WebGL？兄弟，那是隔壁桌大佬的玩法，咱今天就用最土的div，玩出最骚的效果。

CSS这边用到的都是我们熟悉的老朋友，但组合起来就很有意思：

• border-radius 肯定得用，而且不能老老实实写50%，那样太圆了，得像美妆博主修图那样，稍微压扁一点，做成椭圆，这样才有真实感
• linear-gradient 和 radial-gradient 是制造立体感的关键，没有渐变，眼睛就只是个平面的圆饼
• box-shadow 多层阴影叠上去，内阴影做深邃感，外阴影做发光效果，瞬间赛博朋克味儿就出来了
• @keyframes 让眼睛"呼吸"和"眨眼"，这个呼吸动画要做得特别微妙，不能太明显，不然像 Eye of Sauron 盯着你，怪吓人的

我先把最基础的HTML骨架给你看下，真的是朴实无华：

<!-- 整个眼睛容器，控制位置和大小 -->
<div class="cyber-eye">
  <!-- 眼眶，带科技感的边框 -->
  <div class="eye-socket">
    <!-- 眼白部分，其实咱这科技眼不需要眼白，但要留区域 -->
    <div class="eye-ball">
      <!-- 虹膜，带渐变的那一圈 -->
      <div class="iris">
        <!-- 瞳孔，会收缩的那个黑点 -->
        <div class="pupil">
          <!-- 高光，让眼睛看起来湿润有神 -->
          <div class="highlight"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 科技感装饰线，可加可不加 -->
  <div class="tech-lines"></div>
</div>

看见没？就几个div。有些教程一上来就给你整几十个class，看着就头大。我这版本已经砍到最精简了，多一个div都不要。

从静态图到动态瞳孔的完整实现路径

现在我们来给这个骨架注入灵魂。首先是虹膜部分，这玩意儿不能是纯色的，纯色太假了，得像真的眼睛那样，从外圈到内圈有颜色过渡。而且科技感的眼睛，颜色一般都比较妖艳，什么荧光蓝、毒液绿、赛博紫，往高了饱和度整，别怕刺眼，后面可以调。

用伪元素造虹膜纹理这个小技巧我得好好说说。有人可能会想："那我在iris里面再套几个div行不行？"行是行，但那样HTML就臃肿了。用::before和::after多好，伪元素本来就是用来装饰的，而且不占DOM节点，性能也好点。

.iris {
  width: 200px;
  height: 200px;
  border-radius: 50% 45% 50% 48%; /* 稍微不规则一点，更像真眼 */
  background: conic-gradient(
    from 0deg,
    #00d4ff,
    #0099cc,
    #00ffcc,
    #00d4ff
  ); /* 圆锥渐变，做出虹膜那种放射状纹理 */
  position: relative;
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.8),  /* 内阴影，深邃感 */
    0 0 30px rgba(0, 212, 255, 0.6);     /* 外发光，科技感的来源 */
  animation: breathe 4s ease-in-out infinite; /* 呼吸动画 */
}

/* 用伪元素加一些细密的纹理线条 */
.iris::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 0, 0, 0.1) 2deg,
    transparent 4deg
  ); /* 重复圆锥渐变，模拟虹膜的纤维纹理 */
  opacity: 0.6;
}

.iris::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #000 0%,
    #001a1a 40%,
    #003d3d 100%
  ); /* 瞳孔周围的深色过渡 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
}

看见那个border-radius: 50% 45% 50% 48%了吗？这就是让圆看起来不那么"完美的圆"的小心机。四个值分别是左上、右上、右下、左下的圆角半径，稍微错开几个百分点，形状马上就有机了，不像是用圆规画出来的。

瞳孔的收缩动画是关键，这决定了它看起来是不是真的"活着"。动画节奏很重要，不能太快，太快像受惊了；也不能太慢，太慢像死鱼眼。我试过最好的频率是4-6秒一个周期，微微的放大缩小，就像人在平静呼吸时瞳孔的自然变化。

.pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  background: radial-gradient(
    circle at 35% 35%,
    #1a1a1a 0%,
    #000000 50%,
    #0d1b1e 100%
  );
  border-radius: 50%;
  animation: pulse 4s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}

/* 呼吸动画定义 */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      inset 0 0 20px rgba(0, 0, 0, 0.8),
      0 0 30px rgba(0, 212, 255, 0.6);
  }
  50% {
    transform: scale(1.02); /* 只放大2%，很微妙 */
    box-shadow: 
      inset 0 0 25px rgba(0, 0, 0, 0.9),
      0 0 50px rgba(0, 212, 255, 0.8); /* 发光变强 */
  }
}

/* 瞳孔脉动，比虹膜稍微慢一点，形成错落感 */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.92); /* 瞳孔收缩 */
  }
}

这里有个细节要注意：我在pulse动画里保留了translate(-50%, -50%)，因为如果不写，transform会直接覆盖之前的居中定位，导致瞳孔跑偏。这个坑我踩过，后面会详细说。

高光部分也很重要，没有高光的眼睛看起来像假人。高光一般做两个：一个大一点淡一点，模拟环境光反射；一个小一点亮一点，模拟点光源。位置要错开，一般放在左上方，因为通常光源都在那个方向（除非你想营造从下往上打的鬼光效果）。

.highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.4) 40%,
    transparent 70%
  );
  border-radius: 50%;
  top: 25%;
  left: 25%;
  filter: blur(0.5px); /* 稍微模糊一点，更像真实反光 */
}

/* 加个小点的高光，更有神 */
.highlight::after {
  content: '';
  position: absolute;
  width: 30%;
  height: 30%;
  background: #fff;
  border-radius: 50%;
  top: 20%;
  left: 20%;
}

现在到了让眼睛动起来的环节。纯CSS实现"盯着鼠标看"其实有点 trick，因为我们拿不到鼠标坐标。但可以用:hover状态来模拟：当鼠标悬停在眼睛上时，瞳孔往那个方向偏移。虽然不能精确跟随，但唬人是够了。

/* 假设眼睛有九个区域，对应不同的注视方向 */
.eye-ball:hover .pupil {
  transform: translate(-40%, -50%); /* 往右看 */
  transition: transform 0.3s ease-out;
}

.eye-ball:hover .iris {
  transform: rotate(5deg); /* 虹膜也稍微转一点，更真实 */
  transition: transform 0.5s ease-out;
}

/* 甚至可以配合focus状态，做成可交互的表单元素 */
.cyber-eye:focus-within .pupil {
  animation: pulse 1s ease-in-out infinite; /* 获得焦点时瞳孔快速收缩，像警觉 */
  background: radial-gradient(
    circle at 35% 35%,
    #ff006e 0%, /* 突然变红，警告色 */
    #000000 100%
  );
}

这个:focus-within是个神器，当内部元素获得焦点时，外部容器也能响应。你可以把这个眼睛包在一个button或者input外面，当用户点击时，眼睛变红或者收缩，反馈感拉满。

吹完优点也得泼点冷水：这特效真适合你项目吗

虽然我吹了半天，但咱得实事求是。这东西虽然酷炫，但不是哪儿都能用的。

最大的优点当然是轻量无依赖。你一个CSS文件扔进去，HTML结构复制粘贴，完事儿。不需要引入Three.js，不需要加载WebGL，不需要担心浏览器不支持（只要不用太新的CSS特性，IE11都能勉强跑）。对于个人博客、活动页、404页面这种小项目来说，简直是福音。用户打开页面，"哇"一声，目的就达到了。

但是啊，性能这事儿真得说道说道。我刚开始写的时候，为了让科技感更浓，往那个眼球上叠了五层阴影，还加了个backdrop-filter: blur()，结果在我那台测试用的千元安卓机上，直接卡成PPT，帧率估计不到20。后来一查，多重阴影和模糊滤镜在低端设备上确实是性能杀手。

特别是box-shadow的多层叠加，每一层都要重新计算像素，GPU压力大。如果你页面上放十几个这样的眼睛，手机分分钟变暖手宝。解决方案是慎用模糊，阴影尽量用纯色或者半透明的简单颜色，别搞那种从0到50px的渐变模糊。

还有will-change这个属性，很多人（包括我）一开始乱用，以为加上就能加速，结果适得其反。正确用法是在动画开始前加上，动画结束后移除，或者只在transform和opacity上使用。

可访问性（Accessibility）也是个坑。这种纯视觉的装饰元素，对于用屏幕阅读器的用户来说，就是一堆乱码。而且如果它只是一个装饰品，不是可交互元素，那它就不应该被读出来。记得加上aria-hidden="true"和role="img"，让辅助技术知道这玩意就是个图：

<div class="cyber-eye" aria-hidden="true" role="img" aria-label="装饰性科技之眼">
  <!-- 内部结构 -->
</div>

还有个坑是颜色对比度。我一开始为了追求"赛博感"，用了很亮的青色背景配白色文字，结果对比度不够，视力不好的用户根本看不清。后来用工具一测，对比度才2.1:1，远低于WCAG标准的4.5:1。得把颜色调深一点或者加层半透明遮罩。

实战翻车实录：我第一次写这效果时踩的五个坑

说到踩坑，我可太有发言权了。第一次写这个"科技之眼"的时候，我自信满满，觉得不就几个圆叠一起吗，结果现实给了我狠狠几巴掌。

坑一：z-index层叠上下文地狱

这是我花了一下午才搞明白的。我当时的结构是这样的：眼睛在最底层，上面加个HUD（那种科技感的线框），最上面加个文字层。按理说文字应该在眼睛上面， HUD 在中间。结果死活不行，文字被眼睛挡住了，HUD 反而在文字下面。

后来发现是因为我给眼睛加了transform: scale()动画。一旦元素加了transform（除了none），它就会创建一个新的层叠上下文（stacking context），z-index的计算规则就变了。我的眼睛虽然z-index是1，但因为transform的存在，它实际在渲染时跟没设置z-index的文字层比，规则复杂得要死。

解决方案要么是把所有层都加上z-index，要么是调整HTML结构顺序（后面的元素默认在前面元素上面），要么动画结束后移除transform。我最后是在眼睛容器上加了个isolation: isolate，明确告诉浏览器：“这玩意儿是个独立的层，别跟我整那些虚头巴脑的”。

.cyber-eye {
  position: relative;
  isolation: isolate; /* 创建独立的层叠上下文 */
  z-index: 1;
}

.hud-overlay {
  position: absolute;
  z-index: 2; /* 现在可以正确叠加了 */
}

.text-content {
  position: relative;
  z-index: 3;
}

坑二：动画卡顿硬件加速救我狗命

写完动画在MacBook上丝般顺滑，结果一上手机，卡得跟幻灯片似的。我一开始以为是阴影太多，减少了阴影层数还是卡。后来发现是因为我在动画里改的是width和height属性。

兄弟，千万别在动画里动width/height/top/left！ 这些属性会触发浏览器的重排（reflow）和重绘（repaint），每一帧都要重新计算布局。一定要用transform和opacity，这两个属性可以被GPU直接处理，不走主线程。

我之前写的瞳孔收缩动画是这样：

/* 错误示范！千万别学 */
@keyframes badPulse {
  0% { width: 40%; height: 40%; }
  50% { width: 35%; height: 35%; }
}

改成这样：

/* 正确姿势：用scale替代width/height */
@keyframes goodPulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(0.875); } /* 35/40=0.875 */
}

如果还不行，可以强行开启硬件加速：

.pupil {
  transform: translate3d(-50%, -50%, 0); /* translate3d会强制GPU加速 */
  will-change: transform; /* 提示浏览器这个属性要动画 */
  backface-visibility: hidden; /* 防止一些GPU渲染时的闪烁问题 */
}

坑三：颜色太刺眼被UI设计师追着打

我初版用的颜色是#00ffff（纯青），饱和度拉满，在深色背景下亮得刺眼。设计师小姐姐看了之后说：“这眼睛像是激光枪，能把用户射瞎。”

后来我学了招，用HSL（色相、饱和度、亮度）替代HEX。HSL调颜色直观多了，想要暗一点就调低L（亮度），想要柔和一点就调低S（饱和度）。而且可以用CSS变量，换肤贼方便。

:root {
  --eye-hue: 180; /* 青色 */
  --eye-sat: 80%; /* 饱和度别太高 */
  --eye-light: 50%;
  --eye-color: hsl(var(--eye-hue), var(--eye-sat), var(--eye-light));
  --eye-glow: hsl(var(--eye-hue), var(--eye-sat), 60%, 0.6); /* 发光色 */
}

.iris {
  background: radial-gradient(circle, 
    hsl(var(--eye-hue), var(--eye-sat), 40%) 0%,
    var(--eye-color) 50%,
    hsl(var(--eye-hue), var(--eye-sat), 30%) 100%
  );
  box-shadow: 0 0 30px var(--eye-glow);
}

/* 切换红色主题 */
.cyber-eye.red {
  --eye-hue: 0; /* 红色 */
  --eye-sat: 90%;
}

想要科技蓝--eye-hue: 200，想要毒液绿--eye-hue: 120，想要赛博紫--eye-hue: 280，简单粗暴。

坑四：移动端触控没反应

在电脑上鼠标hover有效果，到了手机上，戳半天没反应。我一开始以为是:hover在移动端不支持，其实不是，移动端点击也会触发:hover，但问题是没有反馈。用户不知道他点到了没有。

而且如果眼睛是放在一个可点击的容器里，移动端300ms的点击延迟会让动画感觉很迟钝。解决方案是加上cursor: pointer（虽然移动端没鼠标，但浏览器识别到这个属性会优化点击响应），还有加上:active状态：

.eye-ball {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* 去掉移动端点击时的高亮蓝框 */
}

.eye-ball:active .pupil {
  transform: translate(-50%, -50%) scale(0.8); /* 按下时瞳孔快速收缩 */
  transition: transform 0.1s; /* 快速响应 */
}

/* 甚至可以用@media (hover: none) 专门给触控设备写样式 */
@media (hover: none) and (pointer: coarse) {
  .iris {
    animation-duration: 2s; /* 触控设备上呼吸快一点，吸引点击 */
  }
}

坑五：不同屏幕下眼睛变形

我一开始用的都是px单位，在我的27寸显示器上看着挺圆润，结果一到手机上，被压缩成椭圆形了，像被人揍了一拳。因为容器宽度被压缩了，但高度没按比例调。

解决方案要么是用aspect-ratio: 1保持正方形比例，要么索性全部用vw/vh单位，或者直接上padding-bottom: 100%这种百分比padding技巧来维持宽高比。

.cyber-eye {
  width: 200px;
  max-width: 80vw; /* 响应式 */
  aspect-ratio: 1; /* 保持1:1比例，现代浏览器支持 */
  /* 或者老式兼容写法 */
  /* height: 200px; */
}

/* 老式浏览器兼容 */
@supports not (aspect-ratio: 1) {
  .cyber-eye::before {
    content: '';
    display: block;
    padding-top: 100%; /* 高度=宽度 */
  }
}

老鸟私藏技巧：让"科技之眼"不止是炫技

当你基础版本跑通之后，可以尝试一些更骚的操作，让这个眼睛真正实用起来。

一键换色适配暗黑模式

现在系统都支持暗黑模式了，咱这个眼睛也得懂事，白天晚上自动变色。CSS有个prefers-color-scheme媒体查询，可以检测系统主题：

.cyber-eye {
  --eye-hue: 200; /* 默认蓝色 */
  --brightness: 1;
}

/* 暗黑模式：发光强一点，颜色冷一点 */
@media (prefers-color-scheme: dark) {
  .cyber-eye {
    --eye-hue: 180; /* 偏青 */
    --brightness: 1.2;
    --eye-glow: hsl(var(--eye-hue), 90%, 60%, 0.8);
  }
}

/* 亮模式：发光弱一点，颜色实一点 */
@media (prefers-color-scheme: light) {
  .cyber-eye {
    --eye-hue: 220; /* 偏蓝 */
    --brightness: 0.9;
    --eye-glow: hsl(var(--eye-hue), 70%, 40%, 0.4);
  }
}

甚至可以手动加切换按钮，用JS切换data-theme属性，然后CSS根据属性值变化。这比直接用class更规范。

用clip-path裁剪出异形瞳孔

圆形瞳孔太普通了，试试猫瞳？或者裂瞳（像 goat 那种横条）？clip-path属性可以实现：

/* 猫瞳（竖线） */
.pupil.cat {
  clip-path: ellipse(20% 45% at 50% 50%);
  background: #000;
}

/* 裂瞳（山羊那种横条） */
.pupil.goat {
  clip-path: polygon(
    20% 40%, 80% 40%, 
    100% 50%, 80% 60%, 
    20% 60%, 0% 50%
  );
  background: linear-gradient(to bottom, #000 40%, #1a1a1a 50%, #000 60%);
}

/* 甚至可以用SVG path做更复杂的形状 */
.pupil.tentacle {
  clip-path: path('M50 0 Q80 25 50 50 Q20 75 50 100 Q80 75 50 50 Q20 25 50 0');
}

配合transition: clip-path 0.5s，hover时从圆形变成裂瞳，惊悚效果max。

Intersection Observer，滚到视口才开始动

如果页面很长，眼睛在底部，用户一打开页面就开始眨眼呼吸，其实挺浪费性能的，而且用户也看不到。可以用 Intersection Observer API（虽然这是JS，但性能很好），让眼睛进入视口才开始动画：

// 纯CSS方案：用animation-play-state: paused配合JS
// 或者用Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    } else {
      entry.target.classList.remove('is-visible');
    }
  });
}, {
  threshold: 0.1 // 露出10%就触发
});

document.querySelectorAll('.cyber-eye').forEach(eye => {
  observer.observe(eye);
});

CSS配合：

.cyber-eye .iris {
  animation-play-state: paused;
}

.cyber-eye.is-visible .iris {
  animation-play-state: running;
}

这样既省电又流畅，特别是移动端多几个这种动画的时候，差别很明显。

当loading指示器用

谁说loading一定得是转圈圈？让眼睛眨着loading多酷。可以给它加个data-loading属性，变成loading模式：

.cyber-eye[data-loading="true"] .pupil {
  animation: loadingBlink 1s steps(2) infinite; /* 快速眨眼 */
}

.cyber-eye[data-loading="true"] .iris {
  animation: loadingScan 2s linear infinite; /* 虹膜旋转扫描 */
}

@keyframes loadingBlink {
  0%, 50% { transform: scaleY(1); }
  51%, 100% { transform: scaleY(0.1); } /* 闭眼 */
}

@keyframes loadingScan {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); } /* 彩虹色扫描 */
}

JS里控制：

// 开始加载
eye.setAttribute('data-loading', 'true');

// 加载完成
fetch('/api/data').then(() => {
  eye.setAttribute('data-loading', 'false');
  eye.classList.add('loaded'); // 眨眼一次表示完成
});

用户等待的时候看着这眼睛眨巴眨巴，比干等着有趣多了。不过注意loading完成后要给个反馈，比如眼睛突然睁大或者变个颜色，告诉用户"好了"。

写完这个眼睛，我悟了

折腾完这一通，我最大的感受不是"我代码写得真牛"，反而是觉得前端这活儿真的挺像手工耿做发明——一堆破铜烂铁（div标签），加点电焊（CSS），居然能搞出这么有意思的东西。

你看啊，咱们前端其实很多时候不需要多高大上的框架，多复杂的技术栈。HTML+CSS这两兄弟，从90年代活到现在，依然有无限的可能性。你就想想，刚才那堆div，在浏览器里变成了一个有呼吸、有反应、有质感的"眼睛"，这事儿本身就很魔法。

有时候刷知乎看到有人问："2024年了还学HTML/CSS是不是过时了？"我就想让他来看看这眼睛。过时的不是技术，是思维。你用新框架写十个表单，和你用纯CSS做一个让用户"哇塞"的特效，哪个更有意思？我觉得是后者。

而且做这种小东西特别解压。工作里天天写业务组件，标签列表、按钮组、表单验证，写多了真的会麻。但当你下班之后，打开CodePen，纯粹为了好玩写个会动的眼睛，看着它一眨一眨的，那种成就感其实挺治愈的。就像小时候玩乐高，没人逼你搭什么，你就是想看到一堆塑料块最后变成城堡的那一刻。

所以啊，如果你是个前端萌新，看完这篇文章别光收藏，真的去敲一遍代码。报错就报呗，调就是了。等那个眼睛在你屏幕上第一次"呼吸"起来的时候，你就知道为啥我们这群人明明被SQL报错、后端接口、产品经理需求折磨得要死，还在这个行业里坚持了。

就酱，我去给我的"科技之眼"加第三层光影效果了，回头群里见！

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：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等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！