渐变色如何做移入效果?

今天,我们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%);
      }
    }
}

前端的苦前端自己吃。

不要和比人争论什么

相关推荐
lqjun08271 小时前
Qt程序单独运行报错问题
开发语言·qt
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
hdsoft_huge3 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
风中的微尘3 小时前
39.网络流入门
开发语言·网络·c++·算法
前端君3 小时前
实现最大异步并发执行队列
javascript
未来之窗软件服务3 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
小冯记录编程4 小时前
C++指针陷阱:高效背后的致命危险
开发语言·c++·visual studio