Issue#2018-07-09

问题描述:想要实现张嘴露出舌头的动画效果。

step 1：找前人开源的代码参考

参考：https://codepen.io/sashatran/pen/zNjoje

参考代码中实现这个效果的代码：

图层设定 触发动作

所以，只要先后建立舌头图层和嘴图层，然后在创建动画并启动动作的时候，使嘴图层下拉时，剪去mouth（嘴图层）和mouth::before（舌头图层）未重叠的地方。

step 2：

首先，我将代码贴到vs code中，整合html和css，并保存为html，出现报错，发现参考代码使用的是SASS，html文件不支持。

step 3：

于是将原SASS转换成CSS，主要是对伪元素：before进行修改：

html中不承认sass 改成css

step 4：

改完后，在vs code中报错消失，但是效果没有出现。mouth::before（粉色椭圆图层）的位置定位正确。个人判断是否存在逻辑错误？定位以下代码：

overflow:hidden;

overflow:hidden 实现类似剪切的效果，其渲染的效果便是将父元素mouth::before超出的部分给剪切掉。所以overflow放在mouth中。这么理解是否正确呢？

试着将overflow:hidden 换到mouth::before中也没有出现舌头图层。

所以overflow:hidden为什么会失效呢？