vue使用京东的NutUI库的骨架屏,添加高亮滑过动画

最近在使用vue+NutUi库在做移动端,说实话,京东这个库真的难用,问题真多了,不过都使用大半了,再换也来不及了。
在使用骨架屏组件时,官方文档上都有滑过的高亮动画了,但使用出来是没有的。
在这里插入图片描述
这就使用处来的,太单调了
只能自己添加了,

.vue-skeleton-row {
    position: relative;

}

.vue-skeleton-row::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.2)7%, rgba(255, 255, 255, 0) 10%);
    background-size: 150% 100%;
    animation: shine 0.8s infinite;
    animation-delay: 0s;
    animation-timing-function: linear;
}

@-webkit-keyframes shine {
    0% {
        background-position-x: 150%;
    }

    50% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: -150%;
    }
}

这样就有了,这里就不放动画了, 还得录制,不过好用

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值