[分享]css3张嘴

CSS3提供了很多有趣的特效与动画，比如说今天我们要讲的就是“张嘴”效果，这种效果可以让元素像是在模仿人类一样的做出张嘴的动作，非常有趣。 .mouth { width: 50px; height: ...

CSS3提供了很多有趣的特效与动画，比如说今天我们要讲的就是“张嘴”效果，这种效果可以让元素像是在模仿人类一样的做出张嘴的动作，非常有趣。

 .mouth {
      width: 50px;
      height: 30px;
      border-radius: 50% / 25%;
      background-color: pink;
      position: relative;
      top: 20px;
      animation: open-mouth 2s infinite alternate;
    }

    @keyframes open-mouth {
      0% {
        height: 30px;
      }
      50% {
        height: 60px;
      }
      100% {
        height: 30px;
      }
    } 

这段CSS代码就是实现“张嘴”效果的关键，首先我们需要定义一个

元素，然后使用border-radius属性将其变成圆形，并且设置一个比较奇特的值“50% / 25%”，这个值表示水平方向上是50%，垂直方向上是25%，这样就可以模仿出人嘴的形状了。

接着我们设置该元素的初始高度为30px，并在CSS3的@keyframes规则中定义一个动画，动画名字叫做“open-mouth”，该动画的作用是让元素高度从30px逐渐变化到60px，然后再变回30px。

最后我们可以使用animation属性，将该动画应用到元素上，设置一个2s的持续时间并通过infinite关键字实现动画的无限循环。

通过以上的简单CSS代码，我们就实现了一个非常有趣的“张嘴”效果，让我们的元素变得更加生动活泼。