嘉立创社区
发动态
综合 最新发布 最新回复
图文
列表
置顶
🧧【春节公告】积分抽奖奖品发放调整通知
置顶
【嘉立创EDA软件插件体验送券】叮咚！新款插件来咯～
1. 前言2026 年已经到来，前端技术又迎来了新一轮的革新。今天，我为你精选了 4 个在 2025 年正式发布、2026 年必须掌握的 CSS 新特性，让你的技术更上一层楼！2. 兄弟元素定位：sibling-index() 与 sibling-count()早些时候这些还只是实验性质的功能，现在它们已经在稳定的 Chrome 和 Safari 浏览器中可用了！记得以前实现列表项交错动画时，要手动给每个元素设置不同的延迟吗？现在，用 sibling-index() 一行代码就能搞定！ li { transition: opacity 0.3s ease; transition-delay: calc((sibling-index() - 1) * 100ms); } 这个函数会自动获取元素在兄弟节点中的位置（从 1 开始计数），通过简单的计算就能实现流畅的交错动画效果。如果再搭配 @starting-style，连入场动画都能轻松搞定： li { transition: opacity 0.3s ease; transition-delay: calc((sibling-index() - 1) * 100ms); @starting-style { opacity: 0; } } 实现效果如下：3. 滚动状态查询：@container scroll-state()现在你可以精确地知道用户正在如何滚动页面。不仅如此，你还可以查询滚动条的三种状态：粘附、贴靠、可滚动。首先，给需要监测的容器加上 container-type: scroll-state，然后就可以用 @container scroll-state() 来查询它的状态了。3.1. 粘附状态：stuck /* 当导航栏被“粘住”时 */ @container scroll-state(stuck) { .inner-navbar { box-shadow: var(--shadow-3); } } 使用效果如下：3.2. 贴靠状态：snapped section { overflow: auto hidden; scroll-snap-type: x mandatory; > article { container-type: scroll-state; scroll-snap-align: center; @supports (container-type: scroll-state) { > * { transition: opacity 0.5s ease; @container not scroll-state(snapped: x) { opacity: 0.25; } } } } } 使用效果如下：3.3. 可滚动状态：scrollable而且你可以查询滚动方向： @container scroll-state(scrollable: top) { } @container scroll-state(scrollable: right) { } @container scroll-state(scrollable: bottom) { } @container scroll-state(scrollable: left) { } 我们来举一个例子： .scroll-container { container-type: scroll-state size; overflow: auto; &::after { content: " "; background: var(--_shadow-top), var(--_shadow-bottom); transition: --_scroll-shadow-color-1-opacity 0.5s ease, --_scroll-shadow-color-2-opacity 0.5s ease; @container scroll-state(scrollable: top) { --_scroll-shadow-color-1-opacity: var(--_shadow-color-opacity, 25%); } @container scroll-state(scrollable: bottom) { --_scroll-shadow-color-2-opacity: var(--_shadow-color-opacity, 25%); } } } 使用效果如下：你可以发现，在滚动的时候，容器顶部和底部有一层阴影。4. 文字精准对齐：text-boxtext-box 可以精确控制文字的边界框，实现像素级的对齐效果。Web 字体渲染时会在字形上下方预留“安全间距”：但有时我们需要进行像素级精确对齐，此时就需要使用 text-box： h1 { text-box: trim-both cap alphabetic; } 这一行代码就能：trim-both：同时修剪上下方的空白cap：修剪到大写字母高度线以上alphabetic：修剪到字母基线以下使用效果如下：机-会技术大厂，前端-后端-测试，全国均有机-会，感兴趣可以试试。待遇和稳定性都还不错~5. 类型安全：typed attr()这是 attr() 函数的升级版，支持类型检查和回退值，在 HTML 和 CSS 之间搭建了强大的桥梁。5.1. 传递颜色 <div data-bg="white" data-fg="deeppink"></div> css .theme { background: attr(data-bg color, black); /* 类型：颜色，默认：黑色 */ color: attr(data-fg color, white); } 5.2. 传递数字 <div class="grid" data-columns="3">…</div> css .grid { --_columns: attr(data-columns number, 3); grid-template-columns: repeat(var(--_columns), 1fr); } 5.3. 类型验证（枚举值） <li scroll-snap="start"></li> <li scroll-snap="center"></li> <li scroll-snap="end"></li> <li scroll-snap="nothing"></li> css [scroll-snap] { scroll-snap-align: attr(scroll-snap type(start | center | end)); } type() 函数会验证属性值是否在允许的关键字列表中，无效值会被优雅地回退。6. 浏览器支持现状你可能会说：“这些功能就像那些时髦衣服……等我们能用了，它们可能已经过时了 😂”确实，浏览器兼容性是每一位前端开发者需要关注的问题。但这些功能其实大多属于渐进增强，我们可以先在支持的浏览器中提供更好的体验，不支持的浏览器回退。7. 最后这 4 个 CSS 新特性其实也代表了 CSS 的未来方向：更智能的布局控制（sibling-index）更精细的交互感知（scroll-state）更精准的视觉设计（text-box）更强大的 HTML-CSS 桥梁（typed attr）2026 年，前端开发不再只是“让页面显示出来”，而是“让体验完美起来”。这些工具让我们能够创造出更精致、更智能、更用户友好的网页体验。——转载自：冴
2026 年前端必须掌握的 4 个 CSS 新特性！
开源硬件平台
出差第二天
开源硬件平台
@tgjohn
开源硬件平台
7 已解决
ESP32C3_WROOM-02 单 TYPE-C 口实现烧录 + 调试的 电路设计疑问 大佬们，请教一下，使用 ESP32C3_WROOM-02 模组设计电路时，计划通过单个 TYPE-C 接口同时实现程序烧录（idf.py flash）和调试信息打印（idf.py monitor）功能，有以下 3 个问题请教： 1. 是否必须将模组的 UART0 连接 USB 转串口芯片，再与 TYPE-C 口相连，才能实现该复用功能？ 2. 模组原生的 USB_D+、USB_D - 引脚，能否直接作为普通 GPIO 引脚使用？ 3. 若将模组原生的 USB_D+、USB_D - 引脚直接连接 TYPE-C 口，能否直接实现程序烧录（idf.py flash）和调试信息打印（idf.py monitor）功能？
开源硬件平台
设计小姐姐： “搞一下这样的回弹效果，你行不行？” 我：“行！直接 50 行 keyframes + transform + 各种百分比，搞定 ” 设计小姐姐：“太硬（撇嘴），不够 Q 弹（鄙视）” 我：(裂开) 隔壁老王：这么简单你都不行，我来一行贝塞尔 cubic-bezier(0.3, 1.15, 0.33, 1.57) 秒了😎 设计小姐姐：哇哦！（兴奋）好帅！（星星眼🌟）好Q弹！（一脸崇拜😍） 我：“？？？”🧠 一、为什么一行贝塞尔就能“Duang”起来？1️⃣ cubic-bezier 是什么？在 CSS 动画里，我们经常写： transition: all 0.5s ease; 但其实 ease、linear、ease-in-out 这些都只是封装好的贝塞尔曲线。 底层原理是： cubic-bezier(x1, y1, x2, y2) 这四个参数定义了时间函数曲线，控制动画速度的变化。x：时间轴（必须在 0～1 之间）y：数值轴（可以超出 0～1！）👉 当 y 超过 1 或小于 0 时，动画值就会冲过终点再回弹， 这就是“回弹感”的核心。2️⃣ 回弹的本质：过冲 + 衰减想象一个球掉下来：过冲：球落地时会压扁（超出终点）回弹：然后反弹回来，再逐渐稳定在动画中，这个“过冲”就是 y>1 的部分， 而“回弹”就是曲线回到 y=1 的过程。🧪 二、一行贝塞尔的魔法✅ 火箭发射 <div class="bounce">🚀发射！</div> <style> .bounce { transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .bounce:hover { transform: translateY(-500px); } </style> 💡 参数解析：y1 = -0.55 → 先轻微反向缩小y2 = 1.55 → 再冲过头 55%，最后回弹到原位🧩 四、常用贝塞尔参数效果描述贝塞尔参数备注微回弹（按钮）cubic-bezier(0.34, 1.31, 0.7, 1)轻柔弹性强回弹（卡片）cubic-bezier(0.68, -0.55, 0.27, 1.55)爆发力强柔和出入cubic-bezier(0.4, 0, 0.2, 1.4)iOS 风弹性放大cubic-bezier(0.175, 0.885, 0.32, 1.275)弹簧感火箭猛冲cubic-bezier(0.68, -0.55, 0.27, 1.55)推背感 ——转载自：前端九哥
UI小姐姐要求有“Duang~Duang”的效果怎么办？
开源硬件平台
1月的小尾巴，记得抓住打板子傲。下个月开始大家就陆续回家过年了吧
开源硬件平台
3 已回答
这结构能否优化 排线H6部分的PB10-15能否移到H4的5-10  剩下的3.3V 5V 地线另做一个4P排针
开源硬件平台
这样子的RS485原理图存在什么问题吗？能用吗？485的A与B是差分信号吧！
开源硬件平台
你好呀
开源硬件平台
今天天气阴，心情平静，继续加油
开源硬件平台
洛宝Ai魔镜让他唱首歌对自己要求还挺高 开源指引 #DIY设计# #嘉立创PCB# #嘉立创免费3D打印# https://oshwhub.com/logan8/luo-bao-ai-mo-jing-xiao-zhi
88次播放
开源硬件平台
记录一次把「标题、描述、背景图」全部做成“流体响应式”的踩坑与经验背景最近给 LUCI OS 官网做首屏改版，需求只有一句话：“PC 端浏览器随意缩放，首屏内容要像海报一样，几乎看不出形变。”听起来简单，但「缩放不变形」+「多端自适应」本质上是矛盾的。 经过 3 轮迭代，我们把问题拆成了 4 个小目标，并给出了最简洁的解法。1. 文本：用 clamp() 一把梭传统写法给 3～4 个断点写死字号，窗口稍微拉一下就会跳变。 CSS 4 级函数 clamp(MIN, VAL, MAX) 天生就是解决“跳变”的：标题：text-[clamp(28px,6vw,48px)]描述：text-[clamp(14px,1.2vw,18px)]一行代码实现「最小值保底、最大值封顶、中间平滑变化」。 浏览器缩放时，字号随 vw 线性变化，肉眼几乎察觉不到阶梯感。2. 容器：限宽 + 居中 = “锁死”水平形变再漂亮的字号，如果容器宽度跟着窗口无限拉伸，一样会崩。 做法简单粗暴： max-w-6xl mx-auto max-w-6xl 把最大内容宽度锁死在 1152px；mx-auto 保证左右留白始终对称。窗口继续拉大，两侧只是等比留空，内容区不再变形。3. 图片（或背景）：固定尺寸 + 背景定位背景图不能跟着 100% 拉伸，否则人物/产品会被拉长。 我们把背景拆成两层：外层：全屏 div，只做黑色渐变遮罩；内层：真正的背景图用css复制 background: url(...) 50% / cover no-repeat; max-width: 1280px; max-height: 800px; 只要窗口没超过 1280×800，背景图始终保持原始比例，居中裁剪。机-会技术大厂，前端-后端-测试，全国均有机-会，感兴趣可以试试。待遇和稳定性都还不错~4. 布局：断点内“锁死”，断点外才变化Tailwind 的 md:flex-row 之类前缀只在跨断点时生效。 在 同一断点内 我们故意：用固定 gap-32px 而非百分比；用固定图片宽 md:w-75 高 md:h-47；用 items-center 保证垂直居中。=> 浏览器宽一点点、窄一点点，所有尺寸都不变，自然看不出变化。 直到窗口拉到下一个断点阈值，布局一次切换，干净利落。最终代码（最简可读版） #嘉立创PCB#<section className="relative flex items-center justify-center min-h-[400px] md:h-[800px]"> {/* 1. 背景层：固定尺寸 + 居中 */} <div className="absolute inset-0 mx-auto" style={{ maxWidth: 1280, maxHeight: 800, background: 'linear-gradient(180deg,rgba(2,2,2,0) 60%,#020202 99%), url(/unlocking_vast_data_potential.png) 50%/cover no-repeat', }} /> {/* 2. 内容层：限宽 + 居中 + clamp */} <div className="relative z-10 w-full max-w-6xl px-4 text-center"> <h1 className="font-bold text-white text-[clamp(28px,6vw,48px)]"> Unlocking Vast Data Potential </h1> <p className="mt-4 mx-auto max-w-5xl text-[clamp(14px,1.2vw,18px)] text-[#8C8B95]"> LUCI OS is powered by Mavi's video understanding engine … </p> </div> </section> 效果1440px 与 1920px 两档分辨率下，标题、描述、背景图的视觉差异 < 2% ；字号、行宽、图片比例在鼠标拖拽窗口时线性变化，无跳变；移动端仍保持完美自适应，无需额外代码。写在最后把「响应式」做细，核心就是 “在需要的范围内平滑，在不需要的范围内锁死”。 希望这 4 个小技巧也能帮你把“缩放不变形”真正落地。——转载自：CrabXin
让网页在 PC 缩放时“纹丝不动”的 4 个技巧
开源硬件平台
开源硬件平台
去官网查看
优质硬件创作分享平台
打赏记录
激励规则
服务时间：周一至周六 9::00-18:00 · 联系地址：中国·深圳（福田区商报路奥林匹克大厦27楼） · 媒体沟通：pr@jlc.com · 集团介绍
移动社区
联系我们