微信小程序无缝衔接弹幕效果纯CSS

效果图

主要运用蒙层、动画延迟

.wxml

复制代码
<view wx:for="{{detail}}" wx:key="{{index}}" class="container" style="--s:{{item.s}}s" >
  <view wx:for="{{2}}" wx:key="{{index}}" class="container-item">
    <text>HTML</text>
    <text>CSS</text>
    <text>JAVASCRIPT</text>
    <text>PHP</text>
    <text>JAVA</text>
    <text>VUE</text>
    <text>REACT</text>
  </view>
</view>

.js

复制代码
Page({
  data: {
    detail:[{s:10},{s:14},{s:4},{s:18},{s:6}],
  },
})

.wxss

复制代码
page{
  padding-top: 100rpx;
  background: #000;
}
.container{
  position: relative;
  display: flex;
  width:100%;
  overflow: hidden;
  -webkit-mask-box-image: linear-gradient(90deg,transparent,#fff,#fff,transparent);
  margin: 30rpx 0;
}
.container-item{
  white-space: nowrap;
}
.container-item text{
  display: inline-flex;
  margin: 20rpx;
  padding: 10rpx 20rpx;
  color: #fff;
  letter-spacing: 4rpx;
  background: #333;
  border-radius: 10rpx;
}
.container .container-item:nth-child(1){
  animation: animation var(--s) linear infinite;
}
.container .container-item:nth-child(2){
  animation: animation2 var(--s) linear infinite;
  animation-delay: calc(var(--s) / 2);
}
@keyframes animation {
  from{
    transform: translate(100%);
  }
  to{
    transform: translate(-100%);
  }
}
@keyframes animation2 {
  from{
    transform: translate(0);
  }
  to{
    transform: translate(-200%);
  }
}

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

相关推荐
FliPPeDround29 分钟前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
Dcc4 小时前
纯 css 实现前端主题切换+自定义方案
前端·css
@二十六4 小时前
微信小程序订阅消息工具封装,兼容一次性订阅和长期订阅
微信小程序·小程序·订阅消息
用力的活着5 小时前
uniapp 微信小程序蓝牙接收中文乱码
微信小程序·小程序·uni-app
知识分享小能手6 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
华仔啊7 小时前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
笨笨狗吞噬者21 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
性能优化·微信小程序·uni-app
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
深蓝电商API1 天前
网页结构解析入门:HTML、CSS、JS 与爬虫的关系
javascript·css·html
爱隐身的官人1 天前
微信小程序反编译教程
微信小程序·小程序·小程序反编译