渐变色如何做移入效果?

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

前端的苦前端自己吃。

不要和比人争论什么

相关推荐
rzl0210 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang11 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景13 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼14 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿16 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再18 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55522 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录27 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000028 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl29 分钟前
深度剖析Kafka读写机制
前端