CSS进度条带斑马纹动画(有效果图)

效果图

.wxml

复制代码
<view class="tb">
  <view class="tb-line" style="transform:translateX({{w+'%'}})" />
</view>
<button bind:tap="updateLine">增加进度</button>

.js

复制代码
Page({
  data: {
    w:0,
  },
  updateLine(){
    this.setData({
      w:this.data.w >= 100 ? 20 : this.data.w + 20
    })
  },
})

.wxss

复制代码
.tb {
  width: 80%;
  margin: 100rpx 10%;
  height: 40rpx;
  border-radius: 50rpx;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
}
.tb-line{
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  background: #46A758;
  transition: transform 0.5s;
  border-radius: 50rpx;
}
.tb-line::after{
  content:" ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-45deg,rgba(255,255,255,0.2) 25%,transparent 25%, transparent 50%,
  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%,transparent 75%, transparent);
  background-size: 60rpx 60rpx;
  animation: lineSize 0.5s infinite linear;
}
@keyframes lineSize {
  from{ background-position: 0 0; }
  to{ background-position:60rpx 0; }
}

遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。

相关推荐
典学长编程41 分钟前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第二天(CSS)
前端·javascript·css·html
Suppose1 小时前
[css]旋转流光效果
css
姜太小白3 小时前
【前端】CSS Flexbox布局示例介绍
前端·css
是你的小橘呀4 小时前
【CSS】揭秘 CSS 浮动:让元素乖乖排队的 "魔法咒语"
css
JuneXcy4 小时前
11.Layout-Pinia优化重复请求
前端·javascript·css
换日线°15 小时前
css 不错的按钮动画
前端·css·微信小程序
qq_4275060817 小时前
JavaScript和小程序写水印的方法示例
前端·算法·微信小程序
前端Hardy21 小时前
HTML&CSS:有趣的轮播图
前端·javascript·css
coding随想21 小时前
深入浅出HTML5 CSS类扩展:getElementsByClassName和classList属性
前端·css·html5
gongzemin1 天前
使用Node.js开发微信第三方平台后台
微信小程序·node.js·express