css

<li class="message"></li>

.message {
  width: 22px;
  height: 22px;
  background-image: url('@/assets/message-01.png');
  background-size: cover;
  background-position: center;
  transition: background-image .3s ease;
  cursor: pointer;
}
.message:hover {
  background-image: url('@/assets/message-02.png');
}

鼠标放上去之前效果

鼠标放上去时效果