背景图鼠标放上去切换图片过渡效果
文章目录
- css
- 鼠标放上去之前效果
- 鼠标放上去时效果
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');
}
鼠标放上去之前效果
鼠标放上去时效果
