背景图鼠标放上去切换图片过渡效果

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');
}

鼠标放上去之前效果

鼠标放上去时效果