分享几个CSS技巧

时间: 2018-05-23阅读: 1455标签: 技巧作者: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

TypeScript 技巧拾遗

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

封装Vue组件的一些技巧

写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式。以弹窗组件为例,一种实现是在需要模板中引入需要弹窗展示的组件,然后通过一个flag变量来控制弹窗的组件,在业务代码里面会充斥着冗余的弹窗组件逻辑,十分不优雅。

网站性能延迟加载图像的五种技巧

即使经过适当的优化,图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能,它们会失去耐心,转向其他地方,除非你能想出一个不影响速度感知的图像加载解决方案。在本文中,您将学习有关延迟加载图像的五种方法

11 种在大多数教程中找不到的JavaScript技巧

当我开始学习JavaScript时,我把我在别人的代码、code challenge网站以及我使用的教程之外的任何地方发现的每一个节省时间的技巧都列了一个清单。

缩短箭头函数的技巧

使用箭头语法,你可以定义比函数表达式短的函数。在某些情况下,你可以完全省略:参数括号 (param1, param2)、return 关键字、甚至大括号 { }。面就让我们来探讨一下如何使箭头函数简洁明了

JS高阶编程技巧--柯理化函数

从中我们可以看出,在某一个阶段之后执行某些代码,我们需要预先把this指向、参数等预先准备好,这种预先处理的思想即柯理化思想。即,柯理化函数的思想:利用闭包的机制,把一些内容事先存储和处理了,等到后期需要的时候拿来用即可。

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

10 个很实用的 JavaScript 技巧

编程语言通常暗藏着各种技巧,熟练使用这些技巧可以提高开发效率。JavaScript 就是一门技巧性很强的语言,掌握常见的语法技巧不但可以加深对语言特性的理解,还可以简化代码,提高编码效率。本文分享 10 个常用的技巧,希望能成为你的开发工具箱的一部分

点击更多...

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