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

相关推荐
山有木兮木有枝_9 小时前
TailWind CSS
前端·css·postcss
一点一木11 小时前
使用现代 <img> 元素实现完美图片效果(2025 深度实战版)
前端·css·html
海天鹰14 小时前
CSS变量
css
Jun28114 小时前
微信小程序初探之数据绑定
微信小程序
顾辰逸you14 小时前
uniapp--咸虾米壁纸(三)
前端·微信小程序
大包子16 小时前
小程序分享(下载)海报随记
微信小程序
996幸存者17 小时前
下拉、上拉选择器 支持搜索、删除、自定义选择内容、任意对象字段映射
微信小程序·uni-app
源码哥_博纳软云21 小时前
JAVA国际版多商户运营版商城系统源码多商户社交电商系统源码支持Android+IOS+H5
android·java·ios·微信·微信小程序·小程序·uni-app
复苏季风21 小时前
从布局难民到 flex 大神:新人必学的 Flex 布局全攻略
前端·css
然我21 小时前
一篇吃透移动端适配!从原理到实战,面试题也帮你整理好了 📱
前端·css·html