分享几个CSS技巧

更新日期: 2018-05-23阅读量: 1671标签: 技巧作者: Kayano

创建剪切动画

对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低。

.animate {
  width: 200px;
  height: 200px;
  background: #000;
  animation: 1s clip;
}
@keyframes clip {
  0% {
      clip-path: inset(0 0 0 0);
  }
  100% {
      clip-path: inset(0 100% 100% 0);
  }
}

clip-path也能用来进行其他规则/不规则图形的剪切

.clip {
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 0 30%, 100% 30%); /* 多边形 */
  clip-path: circle(30px at 35px 35px); /* 圆形 */
  clip-path: ellipse(30px 25px at 35px 35px); /* 椭圆 */
}


优化动画性能

除了使用transform3d开启gpu加速,还可以使用will-change强制gpu加速优化动画性能

.animate {
  width: 200px;
  height: 200px;
  background: #000;
  animation: 1s clip;
  will-change: clip-path;
}
@keyframes clip {
  0% {
      clip-path: inset(0 0 0 0);
  }
  100% {
      clip-path: inset(0 100% 100% 0);
  }
}


实现长宽比

使用padding模拟,然后子元素使用绝对定位

/* 1:1 */
.container {
  width: 200px;
}
.container:after {
  display: block;
  content: ' ';
  padding-top: 100%;
}

/* 16:9 */
.container {
  width: 200px;
}
.container:after {
  display: block;
  content: ' ';
  padding-top: calc(100% * 9 / 16);
}


垂直居中

我们常用的方式:

  • dislay: inline-block
  • top: 50% + transform: tranlsateY(-50%)
  • display: flex

其余还有padding上下撑高、display: table、position + margin: auto、绝对定位 + margin等等,这些属于不常用、特殊场景才能用、css3之前的hack方式,css3之后就不必使用这些来实现垂直居中,就不多说了。

其中display: flex属于万金油,大多数场景可以直接用它,但还是有些特殊的场景不能用:

  1. 子元素需要文字截断,为了兼容4.X的Android浏览器,必须使用其他方式(一般是transform)
  2. 子元素需要多行布局,4.x的Android不支持flex-wrap,不能多行布局


来源:https://segmentfault.com/a/1190000014972551?utm_source=channel-newest


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/809

更快学习 JavaScript 的 6 个思维技巧

我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前:有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候。找不到时间(有时是动力)学习

10 个实用的 JavaScript 小技巧

arguments 对象是函数内部可访问的类似数组的对象,其中包含传递给该函数的参数的值。但它与其他数组不同,我们可以访问其元素值并获得长度,但是不能在其上使用其他的数组方法。

处理 JS中 undefined 的 7 个技巧

当原作者开始学习JS时,遇到了一个奇怪的情况,既存在undefined 的值,也存在表示空值的null。它们之间的明显区别是什么?它们似乎都定义了空值,而且,比较null == undefined的计算结果为true。

TypeScript 技巧拾遗

很早以前就尝试过使用 TypeScript 来进行日常编码,但自己对静态类型语言的了解并不深入,再加上 TypeScript 的类型系统有着一定的复杂度,因此感觉自己并没有发挥好这门语言的优势,使代码变得更具可读性与可维护性

学好Web前端开发,必要了解的HTML+CSS的技巧有哪些?

HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够对网页进行丰富的CSS渲染

react 开发中的一些小技巧,助你一臂之力

我使用 react 开发已经 1 年的时间了,不能说很精通,不过在使用的过程中,确实领悟和总结了一些小技巧,可以加快我们后续的开发

jQuery 性能优化和技巧

我们将介绍在书写代码时,应该需要注意的几个性能问题,希望对于大家在书写高性能的Web应用中有所帮助。使用最新版本的 jQuery 类库,使用合适的选择器

7个有用的Vue开发技巧

随着组件的细化,就会遇到多组件状态共享的情况,Vuex当然可以解决这类问题,不过就像Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!