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

相关推荐
Filotimo_8 小时前
2.CSS3.(2).html
前端·css
江城开朗的豌豆16 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
爱吃甜品的糯米团子16 小时前
CSS Grid 网格布局完整指南:从容器到项目,实战详解
前端·css
江城开朗的豌豆16 小时前
嘿,别想那么复杂!我的第一个微信小程序长这样
前端·javascript·微信小程序
web3d52019 小时前
CSS水平垂直居中终极指南:从入门到精通
前端·css
我有一棵树1 天前
如何优雅的布局,height: 100% 的使用和 flex-grow: 1 的 min-height 陷阱
前端·css·html
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
m0_616188491 天前
CSS中的伪类和伪元素
前端·javascript·css
编程乐学1 天前
小程序原创--基于微信开发者工具实现的猜谜游戏程序
微信小程序·课程设计·小游戏·微信开发者工具·课设·猜谜游戏·小程序大作业
加油乐1 天前
Sass与Less的特性与区别
前端·css