CSS/SCSS 做一个心跳的动画 一、心电图数据化 做动画，需要动画曲线，心跳的曲线自然是心电图，网上随便找一个差不多的，选取完整的一部分 1. 横向10等分 找到基线，横向10等分。整个图是一个心跳周期，10等分一会好算时间，对应 keyframe 中的 10% 20% 30% ... 2. 纵向10等分 以基线为基准，找到上半部分最高的位置作为...

正如名字所写的， transform-origin 就是指定变换的原点。就是一个点。其中的三个参数值分别代表的是这个点的 xyz轴上的相对位置。

img 图片与文字对齐，图标与标题对齐 很多时候，在页面中会遇到图标与文字混排的情况，用 vertical-algin: middle 并不能让图片完全对齐于文字。 目的是达成这种效果：（这并不是用 vertical-align 实现的） 先看一下用 vertical-align 的样子 vertical-align: middle 是设置在 img 上的，此时虽然能凑合看，但并不完美...

font-family 字义显示的字体，特定的字体用 “” 包裹，可以添加多个字体名，用逗号,分隔。系统在使用的时候，会从前往后识别字体，如果不存在字体，就使用下一个。

less 和 sass 是两种 css 预编译语言，就是说通过 less 或者 scss 写的代码最终都会被编译成 css 再使用。其目的是为了更快、更结构的编写 css 文件，都能使用 变量、运算符、判断、方法等等。

主要用到的知识点： 参阅菜鸟教程： [链接] frame animation / 动画延时 flex 实现 HTML {代码...} 说明： loading-1/2/3/4 用于区别四个不同点，loading-item 里放通用样式 CSS 重点 如果了解 less，看这个更清晰些，如果不懂，看下面生成的 css LESS {代码...} CSS {代码...} 最后，WA-LA，完成

在一个菜单面板的时候，把间隔线设置成了 1 绝对像素，生成的效果是下面这样的，在一个线跟其它的不一样。但在 Chrome 上就不会出现这问题。

less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 css 文件，是一种强大的 css 编译语言，能使用 变量、运算符、判断、方法等等。