初始

实现效果

要像笑起来一样从中间慢慢出现

注：笑脸是图片

结构

<li>
    <a href="index.html">Home</a>
    <div class="smile">
        <img src="static/images/smile.png" alt="">
    </div>
</li>

样式实现

.smile{
  width: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transition: 1s;
}

li:hover .smile{
  transform: translateX(-50%) scale(1);
}