keyframe手写小程序滚动公告

​尽量地学习、尽量地经历、尽量地旅游、尽量地吃好东西，人生就比较美好一点，就这么简单

从uni-app转到原生小程序开发之后，一直有一个疑惑：微信小程序的插件市场到底在哪里，或者说它到底有没有插件市场

因为这疑惑让我开始手鲁，自己做自己需要的组件和模板；灵沐V3.0四个组件已经有3个是自己纯手写

今天的苗头转向小程序滚动公告，对于他来说我希望通过css keyframe实现，不掺杂js

示例

wxml

<!-- 公告 -->
<view class="notice">
  <view class="notice-icon">
    <image class="fengrui-img" src="../../images/notice.svg" mode="aspectFill"></image>
  </view>
  <view class="notice-text">
    <view class="noticl-item">心念所至，生万千喜欢 心念所至，生万千喜欢</view>
  </view>
</view>

css

/* 公告 */
.notice {
  margin: 36rpx;
  padding: 26rpx 46rpx;
  border-radius: 40rpx;
  background-color: #211d16;
  display: flex;
  align-items: center;
}
​
.notice-icon {
  width: 48rpx;
  height: 48rpx;
  flex-shrink: 0;
}
​
.notice-text {
  font-size: 30rpx;
  margin-left: 20rpx;
  max-width: 100%;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
​
}
​
.noticl-item {
  animation: scroll linear 4s alternate infinite;
  float: left;
  white-space: nowrap;
  color: #fec009;
}
​
@keyframes scroll {
  0% {
      margin-left: 0;
      transform: translateX(0);
  }
​
  10% {
      margin-left: 0;
      transform: translateX(0);
  }
​
  90% {
      margin-left: 100%;
      transform: translateX(-100%);
  }
​
  100% {
      margin-left: 100%;
      transform: translateX(-100%);
  }
}

预览

滚动速度

以上内容来自知乎，我们探讨一个问题：他滚动的速度如何调整

我们在noticl-item的css下有这样一句话_keyframe

​animation: scroll linear 4s alternate infinite;

意味4秒的时间来处理完所需要的滚动，如果文字较短，滚动缓慢；相反写了大量文字之后它滚动的速度直接起飞

总结

没有总结，网上冲浪学习到的