发动态
综合 最新发布 最新回复
图文
列表
设计小姐姐: “搞一下这样的回弹效果,你行不行?” 我:“行!直接 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”的效果怎么办?
开源硬件平台
记录一次把「标题、描述、背景图」全部做成“流体响应式”的踩坑与经验背景最近给 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 · 集团介绍
移动社区