您当前的位置:主页 > 新跑狗报 > 正文

灵活运用 CSS 开发技巧

2019-11-02 13:46  作者:admin 点击:次 

  何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。

  每写好一篇文章,都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等,这些应该都是我们从小到大写文章而接触到的写作技巧。

  作为程序猿的我们,写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新,让人容易理解,让人舒服自然,同时也让自己成就感满满(哈哈,这个才是重点)。因此,我整理下三年来自己使用到的一些 CSS 开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。

  既然写文章有这么多的写作技巧,那么我也需要对 CSS 开发技巧整理一下,起个易记的名字。

  部分技巧示例代码过长,使用 CodePen 进行保存,点击在线演示即可查看

  兼容项点击链接即可查看当前属性的浏览器兼容数据,自行根据项目兼容需求考虑是否使用

  以下代码全部基于 CSS 进行书写,没有任何 JS 代码,没有特殊说明的情况下所有属性和方法都是 CSS 类型

  一部分技巧是自己探讨出来的,另一部分技巧是参考各位前端大神们的,都是一个互相学习的工程,大家一起进步

  部分技巧示例代码过长,使用 CodePen 进行保存,点击在线演示即可查看

  兼容项点击链接即可查看当前属性的浏览器兼容数据,自行根据项目兼容需求考虑是否使用

  以下代码全部基于 CSS 进行书写,没有任何 JS 代码,没有特殊说明的情况下所有属性和方法都是 CSS 类型

  一部分技巧是自己探讨出来的,另一部分技巧是参考各位前端大神们的,都是一个互相学习的工程,大家一起进步

  要点:移动端使用 rem 布局需要通过 JS 设置不同屏幕宽高比的 font-size,结合 vw 单位和 calc 可脱离 JS 的控制

  要点:移动端使用 rem 布局需要通过 JS 设置不同屏幕宽高比的 font-size,结合 vw 单位和 calc 可脱离 JS 的控制

  要点:通过 transform:scale3d 对内容进行翻转(水平翻转、垂直翻转、倒序翻转)

  要点:通过 transform:scale3d 对内容进行翻转(水平翻转、垂直翻转、倒序翻转)

  要点:有时执行动画可能会导致页面卡顿,可在特定元素中使用硬件加速来避免这个问题

  要点:有时执行动画可能会导致页面卡顿,可在特定元素中使用硬件加速来避免这个问题

  要点:在标签上自定义属性 data-*,通过 attr 获取其内容赋值到 content 上

  要点:在标签上自定义属性 data-*,通过 attr 获取其内容赋值到 content 上

  要点:通过 pointer-events:none 禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等),相当于的 disabled

  场景:限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)

  要点:通过 pointer-events:none 禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等),相当于的 disabled

  场景:限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)

  要点:表单控件触发 focus 和 blur 事件后往父元素进行冒泡,在父元素上通过:focus-within 捕获该冒泡事件来设置样式

  要点:表单控件触发 focus 和 blur 事件后往父元素进行冒泡,在父元素上通过:focus-within 捕获该冒泡事件来设置样式

  要点:将整个页面等比划分成小的单元格,每个单元格监听:hover,通过:hover 触发单元格的样式变化来描绘鼠标运动轨迹

  要点:将整个页面等比划分成小的单元格,每个单元格监听:hover,通过:hover 触发单元格的样式变化来描绘鼠标运动轨迹

  要点:通过 max-height 定义收起的最小高度和展开的最大高度,设置两者间的过渡切换

  要点:通过 max-height 定义收起的最小高度和展开的最大高度,设置两者间的过渡切换

  要点:通过 transform-delay 或 animation-delay 设置负值时延保留动画起始帧,让动画进入页面不用等待即可运行

  要点:通过 transform-delay 或 animation-delay 设置负值时延保留动画起始帧,让动画进入页面不用等待即可运行

  要点:通过 filter:grayscale 设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们

  要点:通过 filter:grayscale 设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们

  要点:通过 linear-gradient 设置背景渐变色并放大背景尺寸,添加背景移动效果

  要点:通过 linear-gradient 设置背景渐变色并放大背景尺寸,添加背景移动效果

  要点:使用 linear-gradient 绘制间断颜色的彩带进行交互生成方格

  要点:使用 linear-gradient 绘制间断颜色的彩带进行交互生成方格

  要点:通过 box-shadow 生成投影,且模糊半径和负的扩张半径一致,使投影偏向一侧

  场景:容器投影、背景补间动画1、背景补间动画2、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影

  要点:通过 box-shadow 生成投影,且模糊半径和负的扩张半径一致,使投影偏向一侧

  场景:容器投影、背景补间动画1、背景补间动画2、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影

  写到最后总结得差不多了,后续如果我想起还有哪些 CSS 开发技巧遗漏的,会继续在这篇文章上补全,同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。

更多相关内容