当前位置: 首页 > news >正文

css 用过渡实现,鼠标离开li时,背景色缓慢消息的样式

要实现鼠标悬停时背景颜色变为黄色,鼠标离开时背景颜色慢慢消失并变回白色的效果,
可以使用CSS的过渡(transition)属性

li {background: #fff;color: #000;transition: background 0.5s ease-out;
}li:hover {background: #fbb31e;color: #fff;
}li:not(:hover) {transition: background 0.5s linear;
}

为li元素设置了一个初始的白色背景,并定义了一个过渡效果,过渡时间为0.5秒,并使用了ease-out的缓动函数使过渡效果更加平滑。
当鼠标悬停在li元素上时,背景颜色会立即变为黄色,文字颜色变为白色。
当鼠标离开时,背景颜色会平滑地过渡回原来的白色。

这里使用了:not(:hover)伪类选择器来选择非悬停状态的li元素,并为它们定义了一个新的过渡效果,过渡时间为0.5秒,并使用了linear的缓动函数,使背景颜色慢慢消失并变回白色

http://www.lryc.cn/news/132281.html

相关文章:

  • pytorch 线性层Linear详解
  • LeetCode 833. 字符串中的查找与替换
  • Oracle故障案例之-19C时区补丁DSTV38更新
  • 设计模式之组合模式(Composite)的C++实现
  • mongo的include方法踩坑
  • 阿里云无影云电脑/云桌面收费价格表_使用申请方法
  • jvm内存溢出排查(使用idea自带的内存泄漏分析工具)
  • JS内存泄漏
  • 线程和进程同步互斥你真的掌握了吗?(同步互斥机制保姆级讲解与应用)
  • Android 9.0 Vold挂载流程解析(上)
  • 界面组件Telerik UI for WinForms R2 2023——拥有VS2022暗黑主题
  • vue+elementui 实现文本超出长度显示省略号,鼠标移上悬浮展示全部内容
  • 【STM32RT-Thread零基础入门】 5. 线程创建应用(线程创建、删除、初始化、脱离、启动、睡眠)
  • 计算机竞赛 python+深度学习+opencv实现植物识别算法系统
  • 深度探索ChatGPT:如何进行专业提问以获取精确答案
  • 1.vue3+vite开发中axios使用及跨域问题解决
  • 【LangChain】P1 LangChain 应用程序的核心构建模块 LLMChain 以及其三大部分
  • 关于查看处理端口号和进程[linux]
  • C 语言的 strcat() 函数和 strncat() 函数
  • C++ string 的用法
  • MyBatis-Flex学习记录1---请各位大神指教
  • 二分查找旋转数组
  • 关于3D位姿旋转
  • 解锁项目成功的关键:项目经理的结构化思维之道
  • 力扣974被K整除的子数组
  • 简单认识Docker数据管理
  • UDP数据报结构分析(面试重点)
  • 【Java 动态数据统计图】动态数据统计思路案例(动态,排序,数组)二(113)
  • C++进阶 类型转换
  • Idea中隐藏指定文件或指定类型文件