- 博客(5)
- 收藏
- 关注
RSS订阅原创 前端零基础入门：巧用 z-index 实现元素阶梯层叠效果
z-index是 CSS 控制元素层叠的核心属性，定位属性是生效前提层级高低由z-index数值决定，数值越大，元素越靠前父子相对 + 绝对定位，是局部元素精准定位的标准方案多个同尺寸元素通过偏移 + 层级控制，可轻松实现阶梯层叠视觉效果掌握 z-index 层叠规则，就彻底解决了页面元素遮挡、层级错乱的问题，是前端布局必须掌握的基础核心知识点！
2026-06-24 22:37:04
198
原创 CSS 零基础实战：实现顺滑悬停变色导航栏
通过通配符重置内外边距，统一盒模型，是前端写布局的第一步，能够有效兼容不同浏览器的默认样式差异，保证页面效果统一。本次导航栏案例，虽然效果简单，但覆盖了布局规范、伪类交互、动画过渡、样式重置、细节优化五大前端基础能力。很多高级网页导航特效，都是在这套基础逻辑上扩展实现的，比如：悬浮放大、字体变色、下划线跟随、激活高亮、多级菜单等。吃透基础 hover 交互 + Flex 布局，就能轻松搞定 90% 的网页导航栏开发需求，非常适合新手积累实战代码经验。
2026-06-24 22:36:42
377
原创 CSS 粘性定位导航栏｜实现鼠标悬停黄变橙效
粘性置顶导航栏 + 悬停变色，是前端入门必学的经典组合效果。核心逻辑非常清晰：依靠粘性定位实现滚动置顶，依靠悬浮伪类实现交互变色，搭配过渡动画优化视觉效果。掌握这个案例后，可以延伸拓展更多高级效果，比如滚动时导航栏自动加深底色、添加阴影效果、按钮缩放动画等，一步步打造更加精致、专业的网页导航栏。
2026-06-17 21:09:20
241
原创 CSS 旋转原点小知识：两种不同旋转效果对比
第一种是绕中心点旋转，这也是 CSS 的默认效果。同时除了平面旋转之外，大家也可以尝试更换旋转指令，使用 rotateX、rotateY 实现三维方向的旋转，能看到更丰富的视觉变化。第二种是绕左上角旋转，把原点设置为 left top 后，元素的左上角位置会保持固定不动，整个元素如同被钉子钉在角落一般，围绕左上角进行摆动旋转，视觉风格和中心旋转区别很大。做前端开发时，CSS 旋转动画是很常用的效果，很多人会疑惑，同样设置旋转角度，呈现出来的效果却截然不同，其实问题就出在旋转原点上。
2026-06-17 21:08:19
196
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人