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

文章目录

css

css 复制代码
<li class="message"></li>
css 复制代码
.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');
}

鼠标放上去之前效果

鼠标放上去时效果

相关推荐
Python×CATIA工业智造3 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜4 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄4 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122465 小时前
JAVA内存区域划分
java·开发语言·redis
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack6 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext6 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)7 小时前
后端快捷代码
java·开发语言