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

文章目录

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

鼠标放上去之前效果

鼠标放上去时效果

相关推荐
whoarethenext几秒前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖16 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水38 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)1 小时前
后端快捷代码
java·开发语言
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
Jay_5151 小时前
C++多态与虚函数详解:从入门到精通
开发语言·c++
路来了1 小时前
Python小工具之PDF合并
开发语言·windows·python
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust2 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript