微信小程序：无需JS，超简单利用CSS3搭建跑马灯

最新推荐文章于 2024-08-18 10:46:46 发布

天行哥哥

最新推荐文章于 2024-08-18 10:46:46 发布

阅读量1k

点赞数 1

分类专栏：小程序文章标签：微信小程序跑马灯 CSS3 animation @keyframes

本文链接：https://blog.csdn.net/txz_gray/article/details/84282421

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

看过有利用JS定时器的，有利用微信小程序动画API的，都比较复杂，须不知CSS3可以简单的设置动画效果咩，还是此方法so easy！

.wxml文件：

<template name='raceLamp'>
  <view class='lamp_container'>
    <view class='lamp_text'>{{lampContent}}</view>
  </view>
</template>

（lampContent是要传入的跑马灯文字内容）

.wxss文件：

.lamp_container {
  background-color: #fe4655;
  position: fixed;
  width: 100%;
  height: 50rpx;
  line-height: 44rpx;
  top: 0;
  left: 0;
  z-index: 10;
}

.lamp_text {
  color: #fff;
  font-size: 28rpx;
  display: inline-block;
  white-space: nowrap;
  animation: horseRunning 15s linear infinite;
}

@keyframes horseRunning {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

主要就是用了animation属性，以及@keyframes规则，通过改变transform的x轴达到跑马灯左右移动效果。（相关CSS属性介绍可点击查看）