问题描述:想要实现张嘴露出舌头的动画效果。
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为什么会失效呢？
