Cxiaomu的博客

VUE使用CSS3动画实现多个跳动小球（语音输入动画）安卓端嵌H5页面，实现语音输入并包含输入时动画，跳动的小球。通过查阅各种资料，根据实际需求场景，最终实现了其功能。在此便回顾记录一下吧。单个小球无限跳动首先，实现单个小球跳动。 分析： 小球起始位置在顶部，中间时间段到底部，最后又回到顶部，并且是无限循环的。通过相对定位与CSS3的关键帧结合实现。多个小球跳动分析： 多个小球同时跳动，相对定位需要left不相同，其次每个小球动画开始有时间差，其次就是小球颜色了。

SCSS官方称SCSS是 “世界上最成熟、最稳定、最强大的专业级CSS扩展语言！兼容CSS： Sass完全兼容所有版本的CSS。可以无缝地使用任何可用的CSS库。特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性。社区庞大： 数家科技企业和成百上千名开发者为Sass提供支持。框架： 有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。SCSS是采用的Ruby语言编写的一款css预处理器语言。

在实际开发过程中有遇到一个场景：一个list，每行个数固定，点击单个元素后，在当前行与下一行之间插入一行元素详情，便于更直观的查看到对应的数据详情。这种情形，在移动端比较常见，比如用户列表，点击单个列表 展示详情，可以考虑 flex 布局 + position relative 定位。

画一个三角形并仅点击三角形区域才会触发点击事件。画个三角形绑定点击事件（涉及点击区域）关于画三角形，是个老生常谈的问题，最常用的就是使用border来实现，这里提供更多更好用的方法，svg polygon绘制三角形、canvas、css clip-path:polygon( ) 裁剪可视区域，并结合 addEveentListener 实现仅点击三角形时触发事件。