每周一个前端动画之二：支持率展示动画

就在这样不算浓郁的过年气息中，更新第二篇每周一个前端动画系列。

今天地铁上人明显少了很多，大家相视而笑，互相点头示意但是眼神坚定。因为他们知道，只有共和国最优秀的人才，各部门最重要的岗位才会在这个时候出现在这个车厢里.拖着行李箱的人羞愧的低下了头，但是没有人责怪他们，毕竟每个人的能力都是有限的，与其让他们继续工作，不如放他们回家过年。

本文分析实现的某些效果，仅仅作为一个思路分享，仅仅作为学习素材使用。

源动画效果

结合上一篇的球队logo的展示，在其下方放置了一个bar，用来展示球队的支持率。这条支持率显示bar可以点击，为球队增加支持率。这个效果展示如下：

实现分析

经过观察可发现：

动画左右对称，实现一边即可

点击时支持率的变化是宽度的变化，两方占有的宽度是按照比例（支持人数/总人数）设置的，点击时该队的支持人数和总人数同时改变

红蓝相连接的地方是一个斜角，这里的实现可以用到 的一个技巧

点击是“+1”效果是一个放大动画

分析完这些怎么样，是不是已经有思路了，来让我们看代码。

代码实现宽度改变效果

注意点击时候需要将支持数和总数同时加1，然后根据此数量修改支持率的宽度。

倾斜角的实现

倾斜角一般我们都是通过 实现，但是该方式在设置两个不同颜色时候显得不是那么的方便。上面说到我们可以利用 技巧实现这个倾斜角。当我们设置一个元素的 , 都为0的时候，我们设置的 将进行占位，该属性设置的值将会平分该块，假如将左右块重复，效果可以展示为如下：这时只要设置其他部分边框的颜色为透明，就可以实现这个倾斜角的效果。

设置代码如下

“+1”动效的实现

继续使用关键帧，可以进行如下的设置，注意每次点击时候需要将未完成的动画清除掉，只显示最后一次。

效果展示

关键点解读

本文的关键点的实现除了“+1”动效，就是倾斜角的实现。“+1”动效依然可以使用关键帧实现，而倾斜角使用 伪类以及 的方法进行实现的方式希望可以给大家带来新鲜的感觉。代码已上传到github，欢迎提出Issues。(https://github.com/zhyjor/animation-css-demos.git)

最后的惯例，贴上我的博客(https://github.com/zhyjor/homepage-index)，欢迎关注