首页 当前归档/2019年12月/总共4文章

transition轻松实现元素过度效果

  • 发布时间2019-12-21, 星期六
  • 分类CSS
  • 大约1.1k个字数
  • 预计阅读4分钟

transition是css3中的新增属性,用来设置元素的动画过渡效果,以前要实现一个元素的过渡动画往往需要通过js写很多代码来实现而且还需要考虑各种兼容性,并且js做出的效果消耗浏览器性能;使用transition属性只需要几行代码就能实现各种炫酷的过渡效果,而且transition还可以通过GPU硬件加速,减少repaint操作,不占用js线程,过渡效果更佳柔和。

阅读全文
CSS3

css3中控制js事件行为

  • 发布时间2019-12-17, 星期二
  • 分类CSS
  • 大约459个字数
  • 预计阅读1分钟

有时候我们在做页面的时候经常会遇到这样的需求,想让某个元素不执行js的一些交互行为,这个时候我们可以使用css3中为我们提供的pointer-events属性,他可以让我们轻松实现元素禁止js的交互行文,包括click、hover等事件。

移动端想要禁止某元素的滑动行为可以使用touch-action属性

阅读全文
CSS3

flex布局

  • 发布时间2019-12-16, 星期一
  • 分类CSS
  • 大约2.9k个字数
  • 预计阅读11分钟

在flex出现之前我们做页面都是使用的左右浮动,inline-block,表格等布局方式来实现页面的各种布局,在这些写法中由于浏览器的兼容问题还需要写很多的hack来解决兼容问题。

2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有主流浏览器的支持,这意味着,现在就能很安全地在页面中使用弹性flex布局,Flex 布局也将成为未来布局的首选方案。

阅读全文
CSS3

columns多列属性

  • 发布时间2019-12-13, 星期五
  • 分类CSS
  • 大约928个字数
  • 预计阅读3分钟

我们在做新闻网站的时候想实现和报纸一样的多列布局效果可以使用css为我们提供的columns属性,他可以让我们轻松实现多列布局效果,类似于word中对文字的分栏排版效果,同时我们还可以通过他的各种属性来设置不同的效果。

阅读全文
CSS3
  • 祁维国
  • 一台电脑,一根网线,能够宅到天昏地暗
0