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,很少看博客,对你有帮助别忘记点赞收藏。

相关推荐
luckyPian3 小时前
前端+AI:CSS3(二)
前端·css·css3
muyouking113 小时前
Tailwind CSS 小白快速入门速查手册
前端·css·css3
江城开朗的豌豆6 小时前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
江城开朗的豌豆6 小时前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
菜鸟una8 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
狂团商城小师妹14 小时前
XYlease租赁商城小程序
微信·微信小程序·小程序
fruge16 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
znhy@12318 小时前
CSS易忘属性
前端·css
软件技术NINI18 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
小肚肚肚肚肚哦20 小时前
CSS 伪类函数 :where 简介
前端·css