当前位置: 首页 > 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的缓动函数,使背景颜色慢慢消失并变回白色

相关文章:

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

要实现鼠标悬停时背景颜色变为黄色,鼠标离开时背景颜色慢慢消失并变回白色的效果, 可以使用CSS的过渡(transition)属性 li {background: #fff;color: #000;transition: background 0.5s ease-out; }li:hover {background: #fbb31…...

pytorch 线性层Linear详解

线性层就是全连接层,以一个输入特征数为2,输出特征数为3的线性层为例,其网络结构如下图所示: 输入输出数据的关系如下: 写成矩阵的形式就是: 下面通过代码进行验证: import torch.nn as nn …...

LeetCode 833. 字符串中的查找与替换

2235. 两整数相加 添加链接描述 给你两个整数 num1 和 num2,返回这两个整数的和。 示例 1: 输入:num1 12, num2 5 输出:17 解释:num1 是 12,num2 是 5 ,它们的和是 12 5 17 ,…...

Oracle故障案例之-19C时区补丁DSTV38更新

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA工作经验 一位上进心十足的【大数据领域博主】!😜&#x1f61…...

设计模式之组合模式(Composite)的C++实现

1、组合模式的提出 在软件开发过程中,使用者Client过多依赖所操作对象内部的实现结构,如果对象内部的实现结构频繁发生变化,则使用者的代码结构将要频繁地修改,不利于代码地维护和扩展性;组合模式可以解决此类问题。组…...

mongo的include方法踩坑

前言 又是不认识自己代码的一天 问题 Query query new Query(); if(StringUtils.isNotNull(reqVO.getFieldLimitList()) && reqVO.getFieldLimitList().size() > 0){for(String filedName : reqVO.getFieldLimitList()){query.fields().include(filedName);} }看到…...

阿里云无影云电脑/云桌面收费价格表_使用申请方法

阿里云无影云电脑配置具体收费价格表,4核8G企业办公型云电脑可以免费使用3个月,无影云电脑地域不同价格不同,无影云电脑费用是由云桌面配置、云盘、互联网访问带宽、AD Connector 、桌面组共用桌面session 等费用组成,阿里云百科分…...

jvm内存溢出排查(使用idea自带的内存泄漏分析工具)

文章目录 1.确保生成内存溢出文件2.使用idea自带的内存泄漏分析工具3.具体实验一下 1.确保生成内存溢出文件 想分析堆内存溢出,一定在运行jar包时就写上参数-XX:HeapDumpOnOutOfMemoryError,可以看我之前关于如何运行jar包的文章。若你没有写。可以写上…...

JS内存泄漏

JS内存泄漏 1.意外的全局变量 全局变量的生命周期很长,直到页面关闭,它都存活,所以全局变量上的内存一直都不会被回收 当全局变量使用不当,没有及时回收(手动赋值null),或者拼写错误等将某个变…...

线程和进程同步互斥你真的掌握了吗?(同步互斥机制保姆级讲解与应用)

目录 同步互斥的概念 互斥锁 初始化互斥锁 销毁互斥锁 申请上锁 解锁 案例1:没有互斥锁 多任务的运行情况 案例2:有互斥锁 多任务的运行情况 死锁 读写锁 初始化读写锁 销毁读写锁 申请读锁 申请写锁 释放读写锁 案例:两个任务…...

Android 9.0 Vold挂载流程解析(上)

前言 我们分2篇文章来介绍Android 9.0中存储卡的挂载流程,本篇文章先介绍总体的挂载模块、Vold进程的入口main函数的详细分析,有了这些基础知识,下一篇中我们再详细介绍收到驱动层消息是怎么挂载和卸载存储卡的,还有framework层如…...

界面组件Telerik UI for WinForms R2 2023——拥有VS2022暗黑主题

Telerik UI for WinForms拥有适用Windows Forms的110多个令人惊叹的UI控件。所有的UI for WinForms控件都具有完整的主题支持,可以轻松地帮助开发人员在桌面和平板电脑应用程序提供一致美观的下一代用户体验。 Telerik UI for WinForms R2 2023于今年6月份发布&…...

vue+elementui 实现文本超出长度显示省略号,鼠标移上悬浮展示全部内容

一、场景 表单内的输入框一般为固定宽度&#xff0c;当输入框内容长度超出输入框宽度时&#xff0c;需要显示省略号&#xff0c;并设置鼠标移到输入框上时悬浮展示全部内容。 <el-tooltipplacement"top-start"effect"light":content"basicData[Or…...

【STM32RT-Thread零基础入门】 5. 线程创建应用(线程创建、删除、初始化、脱离、启动、睡眠)

硬件&#xff1a;STM32F103ZET6、ST-LINK、usb转串口工具、4个LED灯、1个蜂鸣器、4个1k电阻、2个按键、面包板、杜邦线 文章目录 前言一、线程管理接口介绍二、任务&#xff1a;使用多线程的方式同时实现led闪烁和按键控制喇叭&#xff08;扫描法&#xff09;1. RT-Thread相关接…...

计算机竞赛 python+深度学习+opencv实现植物识别算法系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的植物识别算法研究与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;4分 &#x1f9ff; 更多…...

深度探索ChatGPT:如何进行专业提问以获取精确答案

ChatGPT&#xff0c;作为OpenAI的先锋&#xff0c;已经展示出其惊人的交流和理解能力。但如何才能充分利用其潜能&#xff0c;并与之进行更深入、更专业的交流呢? 下面&#xff0c;我们将从专业的角度探讨一些提问策略&#xff0c;并附上实际案例&#xff0c;让你更加熟练地与…...

1.vue3+vite开发中axios使用及跨域问题解决

一、跨域问题解决 1.基于vitevue3配置时&#xff0c;在vite.congig.js文件server项目中添加 proxy代理 文件名&#xff1a;vite.congig.js server: {open: true,//启动项目自动弹出浏览器port: 3000,proxy: {/api: {target: http://localhost:8000/api/,changeOrigin: true,rew…...

【LangChain】P1 LangChain 应用程序的核心构建模块 LLMChain 以及其三大部分

LangChain 的核心构建模块 LLMChain LangChain 应用程序的核心构建模块语言模型 - LLMs提示模板 - Prompt templates输出解析器 - Output Parsers LLMChain 组合 LangChain 应用程序的核心构建模块 LangChain 应用程序的核心构建模块 LLMChain 由三部分组成&#xff1a; 语言…...

关于查看处理端口号和进程[linux]

查看端口号 lsof -i:端口号如果-bash: lsof: 未找到命令那我们可以执行yum install lsof 删除端口号进程 一般我们都会使用kill命令 kill -l#列出所有可用信号1 (HUP)&#xff1a;重新加载进程。9 (KILL)&#xff1a;杀死一个进程。15 (TERM)&#xff1a;正常停止一个进程。 …...

C 语言的 strcat() 函数和 strncat() 函数

文章目录 strcat() 函数strncat() 函数 strcat() 函数 原型: char *strcat(char *dest, const char *src) 参数: dest – 指向目标数组&#xff0c;该数组包含了一个 C 字符串&#xff0c;且足够容纳追加后的字符串。 src – 指向要追加的字符串&#xff0c;该字符串不会覆…...

MiniCPM-o-4.5-nvidia-FlagOS处理Markdown文档效果:使用Typora风格进行优雅排版

MiniCPM-o-4.5-nvidia-FlagOS处理Markdown文档效果&#xff1a;使用Typora风格进行优雅排版 不知道你有没有过这样的经历&#xff1a;辛辛苦苦写了一大堆技术笔记&#xff0c;代码片段、命令、思路混杂在一起&#xff0c;过几天自己再看&#xff0c;都感觉像在看天书。或者&…...

FFCreator 10个实用技巧:轻松掌握视频制作的核心功能

FFCreator 10个实用技巧&#xff1a;轻松掌握视频制作的核心功能 【免费下载链接】FFCreator 一个基于node.js的高速视频制作库 A fast video processing library based on node.js 项目地址: https://gitcode.com/gh_mirrors/ff/FFCreator FFCreator是一个基于Node.js的…...

OpenClaw节日应用:GLM-4.7-Flash驱动春节祝福邮件批量定制与发送

OpenClaw节日应用&#xff1a;GLM-4.7-Flash驱动春节祝福邮件批量定制与发送 1. 为什么需要自动化节日邮件&#xff1f; 每年春节前&#xff0c;我都会陷入同样的困境——需要给200多位合作伙伴发送祝福邮件。手动操作意味着&#xff1a;反复复制粘贴内容、检查收件人姓名、调…...

FPGA实战:单总线协议解析与DHT11温湿度数据采集

1. 从零认识DHT11温湿度传感器 第一次拿到DHT11这个白色小方块时&#xff0c;我完全没想到这么便宜的传感器能有如此实用的功能。作为一款经典的数字温湿度复合传感器&#xff0c;DHT11通过单总线协议输出校准后的数字信号&#xff0c;省去了传统模拟传感器需要的ADC转换环节。…...

Mac Mouse Fix:释放第三方鼠标潜能,重构macOS输入体验

Mac Mouse Fix&#xff1a;释放第三方鼠标潜能&#xff0c;重构macOS输入体验 【免费下载链接】mac-mouse-fix Mac Mouse Fix - A simple way to make your mouse better. 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 现象解构&#xff1a;当高端鼠…...

终极Bash Infinity代码审查指南:确保Bash框架代码质量的完整检查清单

终极Bash Infinity代码审查指南&#xff1a;确保Bash框架代码质量的完整检查清单 【免费下载链接】bash-oo-framework Bash Infinity is a modern standard library / framework / boilerplate for Bash 项目地址: https://gitcode.com/gh_mirrors/ba/bash-oo-framework …...

Z-Image-GGUF开源模型价值:Z-Image原始论文复现支持+GGUF量化技术白皮书同步发布

Z-Image-GGUF开源模型价值&#xff1a;Z-Image原始论文复现支持GGUF量化技术白皮书同步发布 1. 项目核心价值&#xff1a;一次部署&#xff0c;双重收获 如果你正在寻找一个既能体验前沿文生图模型&#xff0c;又能深入了解其底层技术原理的解决方案&#xff0c;那么Z-Image-…...

Obsidian插件终极汉化指南:obsidian-i18n让英文插件秒变中文界面

Obsidian插件终极汉化指南&#xff1a;obsidian-i18n让英文插件秒变中文界面 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n 你是否因为Obsidian插件的英文界面而头疼&#xff1f;面对"Backlink"、"Graph …...

dll修复工具绿色版免安装,2026年最新版实测与风险提示

正急着用电脑&#xff0c;突然弹窗“缺少dll文件”&#xff0c;游戏或软件打不开。第一反应就是赶紧找个工具修好它&#xff0c;但又不想在电脑上装一堆乱七八糟的软件&#xff0c;就想找个绿色版、免安装的&#xff0c;用完就能删&#xff0c;不留痕迹。但网上这种小工具满天飞…...

别再只用DataParallel了!PyTorch单机多卡训练保姆级教程(从DP到DDP实战避坑)

从DataParallel到DDP&#xff1a;PyTorch单机多卡训练深度优化指南 当你的模型参数突破1亿大关&#xff0c;单卡训练时间从几小时延长到几天时&#xff0c;多GPU并行训练就从一个可选项变成了必选项。但面对PyTorch提供的DataParallel(DP)和DistributedDataParallel(DDP)两种方…...