渐变色如何做移入效果?

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

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

css 复制代码
.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%);
      }
    }
}

前端的苦前端自己吃。

不要和比人争论什么

相关推荐
我喜欢就喜欢6 分钟前
RapidFuzz-CPP:高效字符串相似度计算的C++利器
开发语言·c++
Zsnoin能8 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房8 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
莫彩8 分钟前
【Modern C++ Part7】_创建对象时使用()和{}的区别
开发语言·c++
轻语呢喃10 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂13 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7713 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
星光542214 分钟前
飞算JavaAI:给Java开发装上“智能引擎”的超级助手
java·开发语言
June bug42 分钟前
【Python基础】变量、运算与内存管理全解析
开发语言·python·职场和发展·测试
醇醛酸醚酮酯42 分钟前
Qt项目锻炼——TODO(五)
开发语言·qt