嘉立创社区
发动态
综合 最新发布 最新回复
图文
列表
设计小姐姐： “搞一下这样的回弹效果，你行不行？” 我：“行！直接 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”的效果怎么办？
开源硬件平台
怎么下载3.2.83旧版本？比赛要求使用
开源硬件平台
你好呀
开源硬件平台
今天天气阴，心情平静，继续加油
开源硬件平台
洛宝Ai魔镜让他唱首歌对自己要求还挺高 开源指引 #DIY设计# #嘉立创PCB# #嘉立创免费3D打印# https://oshwhub.com/logan8/luo-bao-ai-mo-jing-xiao-zhi
75次播放
开源硬件平台
记录一次把「标题、描述、背景图」全部做成“流体响应式”的踩坑与经验背景最近给 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 个技巧
开源硬件平台
文件下载区在哪？
开源硬件平台
谁能开源一个这种的NAS背板啊，大佬们。求跪啦 #NAS#
开源硬件平台
开源硬件平台
嘉立创6层沉金板，质量很高，不错👍
开源硬件平台
在哪里找到Via规则设置？ #嘉立创PCB#
开源硬件平台
网络变压器可匹配CH318T芯片方案如下 深度解读：CH318芯片与网络变压器的协同逻辑及行业应用启示 一、CH318芯片的核心功能与设计哲学 CH318是WCH（南京沁恒微电子）推出的一款集成化USB信号处理芯片，其设计理念围绕**“隔离、传输、扩展”**三大核心需求展开： 高速隔离：通过电容耦合或网络变压器耦合技术，实现USB信号的电气隔离，解决工业环境中的电磁干扰（EMI）和地环路问题。 距离延长：利用实时中转机制，突破USB 2.0标准下3米传输距离的限制，适用于长距离数据传输场景。 HUB集成：内置USB HUB功能，支持上位机/下位机双模式切换，下行端口兼容高速（480Mbps）、全速（12Mbps）和低速（1.5Mbps）设备，极大简化了系统设计复杂度。 深层逻辑：CH318的纯硬件解决方案（无需驱动）和协议透明性，反映了当前嵌入式系统对低功耗、高集成度、即插即用的迫切需求。其与CH339芯片的搭配方案（如USB转SPI/JTAG）进一步体现了模块化设计的趋势。 二、网络变压器与CH318的匹配关键点 根据资料分析，网络变压器与CH318的匹配需关注以下技术细节： 耦合方式选择：CH318支持电容耦合和网络变压器耦合两种方式。若选择网络变压器： PHY侧驱动类型：需确认CH318的UTP口是电压驱动还是电流驱动（资料未明确说明，需查阅CH318数据手册）。例如，电压驱动型需将变压器中心抽头接3.3V/2.5V/1.8V电源，电流驱动型则需接电容到地。 POE兼容性：若需支持POE供电（如720mA直通电流），应选择PHY侧带3线共模电感的变压器（如铭普H2474CG、HQST H82405SP,H81601S ,H1102NL），这类变压器能更好应对POE受电设备的电流冲击。 阻抗匹配与信号完整性： 网络变压器需实现100Ω差分阻抗匹配（与双绞线特性阻抗一致），避免信号反射。 终端电阻（49.9Ω或50Ω）的并联设计是关键，确保输出端呈现100Ω匹配电阻。 推荐型号参考： 非POE场景：可选用通用型网络变压器（如变压器PHY侧2线共模电感）。 POE场景：优先选择支持720mA以上电流的网络变压器（如普思H6062NL），其三线小环CHOKE设计能增强抗干扰能力。
开源硬件平台
为什么我想看社区的案例就会显示504呢
开源硬件平台
相信我们经常这样写bug（不是 👇： try { const res = await api.getUser() console.log('✅ 用户信息', res) } catch (err) { console.error('❌ 请求失败', err) } 看似没问题每个接口都要 try-catch，太啰嗦了！错误处理逻辑分散，不可控！代码又臭又长💨！💡 目标：不抛异常的安全请求封装我们希望实现这样的调用👇： const [err, data] = await safeRequest(api.getUser(1)) if (err) return showError(err) console.log('✅ 用户信息：', data) 是不是清爽多了？✨ 没有 try-catch，却能同时拿到错误和数据。🧩 实现步骤1️⃣ 先封装 Axios 实例 // src/utils/request.js import axios from 'axios' import { ElMessage } from 'element-plus' const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000, }) // 🧱 请求拦截器 service.interceptors.request.use( (config) => { const token = localStorage.getItem('token') if (token) config.headers.Authorization = `Bearer ${token}` return config }, (error) => Promise.reject(error) ) // 🧱 响应拦截器 service.interceptors.response.use( (response) => { const res = response.data if (res.code !== 0) { ElMessage.error(res.message || '请求失败') return Promise.reject(new Error(res.message || '请求失败')) } return res.data }, (error) => { ElMessage.error(error.message || '网络错误') return Promise.reject(error) } ) export default service 拦截器的作用：✅ 统一处理 token；✅ 统一处理错误提示；✅ 保证业务层拿到的永远是“干净的数据”。2️⃣ 封装一个「安全请求函数」 // src/utils/safeRequest.js export async function safeRequest(promise) { try { const data = await promise return [null, data] // ✅ 成功时返回 [null, data] } catch (err) { return [err, null] // ❌ 失败时返回 [err, null] } } 这就是关键！ 它让所有 Promise 都变得「温柔」——不再抛出异常，而是返回结构化结果。3️⃣ 封装 API 模块 // src/api/user.js import request from '@/utils/request' export const userApi = { getUser(id) { return request.get(`/user/${id}`) }, updateUser(data) { return request.put('/user', data) }, } 4️⃣ 在业务层优雅调用 <script setup> import { ref, onMounted } from 'vue' import { userApi } from '@/api/user' import { safeRequest } from '@/utils/safeRequest' const user = ref(null) onMounted(async () => { const [err, data] = await safeRequest(userApi.getUser(1)) if (err) return showError(err) console.log('✅ 用户信息：', data) }) </script> 是不是很优雅、数据逻辑清晰、不需要 try-catch、 错误不崩溃。老板说：牛🍺，你小子有点东西​ 插播一则机-会技术大厂，前端-后端-测试，全国均有机-会，感兴趣可以试试。待遇和稳定性都还不错~​🧱 我们还可以进一步优化：实现自动错误提示我们可以给 safeRequest 增加一个选项，让错误自动提示： // src/utils/safeRequest.js import { ElMessage } from 'element-plus' export async function safeRequest(promise, { showError = true } = {}) { try { const data = await promise return [null, data] } catch (err) { if (showError) { ElMessage.error(err.message || '请求失败') } return [err, null] } } 使用时👇： const [err, data] = await safeRequest(userApi.getUser(1), { showError: false }) 这样你可以灵活控制是否弹出错误提示， 比如某些静默请求就可以关闭提示。🧠 进阶：TypeScript 支持（超丝滑）如果你用的是 TypeScript，可以让返回类型更智能👇： export async function safeRequest<T>( promise: Promise<T> ): Promise<[Error | null, T | null]> { try { const data = await promise return [null, data] } catch (err) { return [err as Error, null] } } 调用时： const [err, user] = await safeRequest<User>(userApi.getUser(1)) if (user) console.log(user.name) // ✅ 自动提示类型 老板：写得很好，下次多写点，明天你来当老板——转载自：前端九哥#嘉立创PCB#
我删光了项目里的 try-catch，老板：6
开源硬件平台
开源硬件平台
去官网查看
优质硬件创作分享平台
打赏记录
激励规则
服务时间：周一至周六 9::00-18:00 · 联系地址：中国·深圳（福田区商报路奥林匹克大厦27楼） · 媒体沟通：pr@jlc.com · 集团介绍
移动社区
联系我们