渐变色如何做移入效果?

news/2024/11/17 21:31:42/

今天,我们ui设计出来的按钮都是渐变色的,移入效果有点烦,记录一下,说实话,就这个移入效果我想了近半小时。

分享一下,慢慢填充颜色的感觉

.button {position: relative;overflow: hidden;z-index: 1;&::before {content: "";position: absolute;top: 0;bottom: 0;right: 0;width: 200%;transform: translateX(0);background-image: linear-gradient(to right, white 0%, black 50%);    transition: transform 0.3s ease;border-radius: inherit;z-index: -1;}&:not([disabled]):hover {&::before {transform: translateX(50%);}}
}

前端的苦前端自己吃。

不要和比人争论什么


http://www.ppmy.cn/news/1451189.html

相关文章

cmd查看局域网内所有设备ip

说明:最近碰到一个新问题,就是有一个安卓设备,安装了一个app导致死机了,app设置了开机重启,所以,无论重启还是关机,都是进来就白屏, 这可把人愁坏了,直接死循环了 无论…

RTSP,RTP,RTCP

机器学习 Machine Learning(ML) 深度学习(DL,Deep Learning) CV计算机视觉(computer vision) FFMPEG,MPEG2-TS,H.264,H.265,AAC rstp,rtp,rtmp,webrtc onvif,gb28181 最详细的音…

【个人博客搭建】(15)Redis缓存使用

1、下载nuget包:StackExchange.Redis; 并引用 using StackExchange.Redis; 2、配置信息 /* Redis缓存配置 */"Redis": {"Enabled": true,"ConnectionString": "127.0.0.1:6379,password123456"} 3、配置模型 public cla…

数据结构——循环结构:for循环

今天是星期五,明天休息,后天补课,然后就是运动会,接着是放假。(但这些都和我没关系啊,哭死!)今天脑袋难得清醒一会儿,主要是醒的比较早吧,早起学了一会&#…

FineReport高频面试题及参考答案

FineReport是一款利用什么语言开发的报表工具? FineReport是一款基于Java语言开发的报表工具。Java是一种广泛使用的编程语言,特别适合于跨平台的软件开发。FineReport利用Java语言的诸多优势,如稳定性、安全性、可移植性和强大的网络功能,构建了一个功能丰富且高效的报表…

《MySQL对数据库中表的结构的操作》

文章目录 一、建表二、查看表结构所有能查看到数据库,表的操作痕迹的本质都是服务器保存下来了这些操作记录。 三、修改表1.改表名字2.添加表记录3.添加表的更多字段4.修改表的字段5. 删除表的字段 总结 以下的数据库表的操作全是基于user_db这个数据库操作的&#…

“Unite“ > MacOS下很不错的网站转应用App的工具

前言 前不久在浏览mac论坛,无意了解到一款非常好的工具,可以将网站转换为app,考虑到我们现在的主要应用都从本地客户端转成web形式使用,但基于本能的使用习惯,还是希望有个快捷的访问信息,这个应用非常适合…

Matlab|含sop的33节点配电网优化

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 程序以IEEE33节点为例,分析含sop的配电网优化,包括sop有功约束、无功约束和容量约束,非线性部分通过转换为旋转锥约束进行编程,并且包括33节点配电网潮流及对应…