掘金学习笔录

大王棒棒的
129 阅读8分钟

2025年学习目标

学会使用语雀、在线文档等工具进行工作功能模块划分、细化以及项目排期

CSS

重点学习的网址
建议收藏！用了这3个CSS3可视化网站，摸鱼时间直接翻倍！(效果优化 重点！！！)
适合收藏，100个CSS优化技巧！

CSS实现水波纹（svg）

CSS Tips：水波纹

image.png

image.png

水波纹SVG 代码在线工具（例如 getwaves.io 、ShapeDriver 和 Haikei app 等）。

利用 SVG 的雪碧图技术，即使用 SVG 的 <symbol> 将每个水波纹实例化，然后在需要使用的地方使用 <use> 来调用。

<svg style="display:none;">
    <symbol id="one" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path fill="white" d="M0,96L1440,320L1440,320L0,320Z"></path>
    </symbol>
    <symbol id="two" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path fill="white" d="M0,32L48,37.3C96,43,192,53,288,90.7C384,128,480,192,576,197.3C672,203,768,149,864,138.7C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </symbol>
  
    <symbol id="three" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path fill="white" d="M0,128L30,144C60,160,120,192,180,197.3C240,203,300,181,360,192C420,203,480,245,540,245.3C600,245,660,203,720,192C780,181,840,203,900,181.3C960,160,1020,96,1080,80C1140,64,1200,96,1260,122.7C1320,149,1380,171,1410,181.3L1440,192L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
    </symbol>
  
    <symbol id="four" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path fill="white" d="M0,192L120,192C240,192,480,192,720,165.3C960,139,1200,85,1320,58.7L1440,32L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
    </symbol>
  
    <symbol id="five" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path fill="white" d="M0,32L120,69.3C240,107,480,181,720,192C960,203,1200,149,1320,122.7L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
    </symbol>
  
    <symbol id="six" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path fill="rgba(255, 255, 255, .8)" d="M0,32L120,64C240,96,480,160,720,160C960,160,1200,96,1320,64L1440,32L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
    </symbol>
</svg>

<div class="cards">
    <div class="card">
        <figure>
            <img src="https://picsum.photos/id/188/800/600" alt="">
            <svg>
                <use href="#two"></use>
            </svg>
        </figure>
        <figcaption>
            <p>现代 Web 布局</p>
        </figcaption>
    </div>
    <!-- 其他 Card -->
</div>

新的 CSS 特性，例如 aspect-ratio 设置图片的宽高比，object-fit 和 object-position 防止图片拉伸和挤压等

3D环形图片墙

5个让页面"活"起来的CSS特效

<div class="container">
  <div id="carousel">
    <figure><img src="img/1.jpeg" alt=""></figure>
    <figure><img src="img/2.jpeg" alt=""></figure>
    <figure><img src="img/3.jpeg" alt=""></figure>
    ....
  </div>
</div>

.container {
    margin: 20% auto;
    width: 210px;
    height: 140px;
    position: relative;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}
#carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}
#carousel:hover {
    animation-play-state: paused;
}
#carousel figure {
    display: block;
    position: absolute;
    width: 186px;
    height: 116px;
    left: 10px;
    top: 10px;
    overflow: hidden;
}
#carousel figure:nth-child(1) {
    transform: rotateY(0deg) translateZ(288px);
}
#carousel figure:nth-child(2) {
    transform: rotateY(40deg) translateZ(288px);
}
#carousel figure:nth-child(3) {
    transform: rotateY(80deg) translateZ(288px);
}

在图片上增加一缕浮光

5个让页面"活"起来的CSS特效

 <div class="flash">
    <div class="flash-bar"></div>
    <img src="./dm.jpg" />
</div>

  .flash {
      position: relative;
      width: 100vw;
      overflow: hidden;
  }
  .flash img {
      width: 100vw;
      height: 100vh;
  }
  .flash-bar {
      position: absolute;
      left: -400px;
      width: 20px;
      height: 100%;
      background: #fff;
      opacity: 0.5;
      transform: skewX(-30deg);
      transform-origin: 0 100%;
  }
  .flash:hover .flash-bar {
      left: 100vw;
      transition: left ease-in-out 1s;
  }

鼠标悬停菜单底下动态出现下划线

#仿B站个人主页菜单鼠标悬停特效

1b89b43eb5504f3da7d22497f981982a~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5b6I5byA6Zeo_q75.webp

纯CSS实现Soul星球

这个动画效果在大屏中可能需要使用 在此记录一下
纯CSS实现Soul星球 95911c289e074bb4b7f18294b61b30ee~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6IuP5q2m6Zq-6aOe_q75.webp

CSS换行

CSS换行最容易出现的bug，半天被提了两个 浏览器换行遵循 单词完整性优先 的规则，即尽可能不在单词或数字序列内部断行；而中文是固定宽度字符，每个汉字视为独立的可断点，因此换行非常自然，展示不下浏览器会将其移动到下一行。

word-break

  • 作用：指定如何对单词进行断行。
  • 取值：
    • normal（默认值）：使用浏览器默认规则，中文按字断行，英文按单词断行。
    • break-all：强制在任何字符间断行（适用于中文、英文、数字）。
    • keep-all：中文按字断行，英文和数字不允许在单词或数字中断行，针对不允许英文跟数字断行，比normal权重更高。

与换行关联的CSS属性

white-space

是否应该允许文本自动换行

image.png

white-space的换行遵循的是单词完整性优先 的规则，如果我们要使单词可以在其内部被截断，就需要使用 overflow-wrap、word-break 或 hyphens。

overflow-wrap

作用：控制单词过长时是否允许断行。

常用值：

  • normal：单词超出容器宽度时不换行。
  • break-word：允许在单词中断行以防止溢出。
  • anywhere：类似 break-word，但优先级更高。

实际开发中，overflow-wrap：break-word的效果同word-break: break-all。但他们存在一点点差异：

换行方式：

  • overflow-wrap: break-word 允许在单词内部进行断行，但会尽量保持单词的完整性。
  • word-break: break-all 则强制在任意字符间进行换行，不考虑单词的完整性。

因此，针对单词断行，使用oerflow-wrap: break-word 会比word-break: break-all更好一些！

  • 中文为主：可以默认使用 word-break: normal;。

  • 中英文混排： overflow-wrap: break-word;。

  • 主要为英文或数字：需要强制换行时，使用 word-break: break-all;。

  • word-break: break-all 换行不了标点符号，试试line-break:anywhere

巧用CSS属性，保持元素的宽高比

巧用css属性，保持元素的宽高比

resize: both; /* 允许用户通过拖拽调整容器大小 */

CSS重复类名增加权重

抛弃 !important 吧，一个更友好的技巧让你的 CSS 优先级变大

CSS 可以多次重复同一个选择器，每次重复都会增加权重 !important 主要用于覆盖UI组件库样式，设置为!important的样式尽量不可覆盖。通过重复类名增加权重无法覆盖内联样式，还是需要通过!important来实现

/* 双重 .checkbox__icon！权重现在是 (0,4,0) */
.newsletter .newsletter__checkbox .checkbox__icon.checkbox__icon {
  top: 5px;
}

CSS技巧：has（），+和*

颠覆你认知，令你疯狂的CSS技巧：has（），+和*🚀🚀—你正在摆脱JavaScript的控制！！😱

+用于选择下一个相邻元素，has用于选择前一个相邻元素，*可以匹配所有符合条件的html标签，不拘泥于class/id/tag等选择器。

+

+ 这个符号是相邻兄弟选择器，选中当前元素后面的兄弟节点元素

.layout-container .item:hover + .item {
      filter: brightness(0.6);
      transform: translateZ(150px) rotateY(40deg);
}

*

* 是通配选择器，它可以匹配任何元素

    .layout-container .item:hover + * {
      filter: brightness(0.4);
      transform: translateZ(70px) rotateY(20deg);
    }
    
    // 当前悬停元素的下一个兄弟元素的下一个兄弟元素
    .layout-container .item:hover + * + * {
      filter: brightness(0.4);
      transform: translateZ(70px) rotateY(20deg);
    }

image.png

has

实现选中前一个相邻元素

    // 类名为item的元素 且该元素的下一个兄弟元素处于悬停状态 即当前悬停元素的前一个兄弟元素
    .layout-container .item:has(+ *:hover) {
      filter: brightness(0.6);
      transform: translateZ(150px) rotateY(-40deg);
    }
    
    // 鼠标移入位置的上一个元素的上一个元素
    .layout-container .item:has(+ * + *:hover) {
      filter: brightness(0.6);
      transform: translateZ(70px) rotateY(-20deg);
    }

image.png

纯CSS实现海浪文字效果

纯CSS实现海浪文字效果

191a091d92d0475490c2809edbc4589d~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Y2X5Z-ORkU=_q75.webp

知识点：

  • 透视效果：perspective: 500px; 在body上设置透视效果，为子元素的3D变换提供视觉深度。

  • transform-style: preserve-3d;  在#ui元素上启用，确保其子元素的3D变换被保留，而不是被压平显示。

  • 混合模式：mix-blend-mode: screen; 使文本颜色与背景色以屏幕混合模式混合，增加视觉效果。

  • clip-path：使用clip-path属性为每个子元素定义不同的裁剪形状，通过计算每个元素的$key（索引减1）和$param（设为5）来调整裁剪路径的坐标。

  • 动画：每个子元素都应用了一个名为wave的动画，动画时长根据$key计算，实现不同步的动画效果。

css gird专题

flex布局详解（内含align-items和align-content的对比案例） 就你小子还不会 Grid布局是吧？
你不了解的Grid布局

drop-shadow background-clip

19 个CSS小技巧

1739266728234.png

image.png

svg

svg实现水波纹

CSS 利用SVG滤镜模仿风吹效果 9eebbfb61b0a4a12b6e2b6449bfaa5e5~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6IuP5q2m6Zq-6aOe_q75.webp

svg专题

svg在线编辑器
案例+图解带你一文读懂SVG

图片转svg

www.ishencai.com/home?vsourc… zh.vectormagic.com/subscriptio…

canvas

fabric.js

没想到学会这个canvas库，竟能做这么多项目

Vue

解决reactive定义的变量重新赋值丢失响应性

通过Object.assign给reactive定义的变量赋值

const form = reactive({
    name: ''
})

Object.assign(form, object)

Vite配置

vite的插件推荐+vite环境基础配置+vite打包项目的常用优化 用了这些 Vite 配置技巧，同事都以为我开挂了！(5000 字干货，建议收藏) Vite官方中文文档

图表

Vue Data UI

弃用 Echarts！这一次我选择 - Vue Data UI
Vue Data UI官方文档

大屏图表样式美化

大屏可视化效果实现记录

image.png

UI框架

v-if搭配key解决el-dialog等UI库组件卸载不掉

为了解决内存泄露,我把 vue 源码改了

image.png

image.png

v-if可能不会引发el-dialog的重新生成，关闭后对部分操作进行缓存，比如表单验证提示等。可通过添加key值促使el-dialog的重新生成。

1738912379272.png

1738912407777.png

自动化测试

离谱！写了5年Vue，还不会自动化测试？

大屏

帆软大屏

帆软大屏demo体验地址 用户名：15950452012
密码：Dawanggreat123!

拖拽

一款好用到爆的可视化拖拽库

WebGL

着色器

着色器案例

其他

前端如何优雅通知用户刷新页面？

前端部署后，用户无法看到新的页面，需要用户手动刷新页面。可监听vite:preloadError 来进行提示或自动刷新页面。

image.png

计算代码运行时间

image.png

如何在Vue中实现不刷新的iframe页面

用于在应用中嵌入iframe页面，并且要求在路由切换的过程中，iframe的内容不会被刷新。
如何在Vue中实现不刷新的iframe页面

扇形旋转切换效果（等级切换转盘）

实在不想看代码了 后续用的到再细看 扇形旋转切换效果（等级切换转盘）

3de523033e81410fb47556e372ecd793~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAgemhhbmdzYW50eA==_q75.webp

DeepSeek

使用vue3调用DeepSeek，实现自己的本地GPT页面

代码优化

为什么同事的前端代码我改不动了？

前端集锦

语雀前端大杂烩

性能

element plus

前端佬们！塌房了！用过Element-Plus的进来~
[Component] 弹窗式组件都存在内存泄露[Component] [select] el-select 本身会造成内存泄漏，使用自定义图标后则不会 #14948

这段没看懂 el-select的造成的内存溢出跟icons-vue有啥关系 1743556369860.png

1743556522708.png

1743556586984.png

1743556632886.png

1743556660120.png

avatar
文章
阅读
粉丝