uniapp 中奖信息横向循环滚动

在这里插入图片描述

	.animate {
   

		font-family: Source Han Sans CN;
		font-size: 30rpx;
		color: #000;
		display: inline-block;
		white-space: nowrap;
		animation: 30s wordsLoop linear infinite normal;

	}



	@keyframes wordsLoop {
   

		0% {
   
			transform: translateX(100%);
			-webkit-transform: translateX(100%);
		}

		100% {
   
			transform: translateX(-720%);
			-webkit-transform: translateX(-720%);
		}

	}

		<view style="position:absolute;top: 950rpx;" class="box">
			<view class="animate" style="display: flex;text-align: center;" >
				<view class="lunduan" v-for="(p,index) in selist" :key="index">
					<b style="color: #E9BD48;font-family: Source Han Sans CN;">恭喜{
  {p.phone}}获得</b><b
						style="color: #FF5E4B;font-family: Source Han Sans CN;">{
  {p.reward_name}}</b>
				</view>
			</view>
		</view>

相关推荐

  1. 横向滚动展示内容

    2024-01-25 17:52:01       44 阅读
  2. uView ScrollList 横向滚动列表

    2024-01-25 17:52:01       52 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-25 17:52:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-25 17:52:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-25 17:52:01       87 阅读
  4. Python语言-面向对象

    2024-01-25 17:52:01       96 阅读

热门阅读

  1. windows环境下设置redis在后台运行

    2024-01-25 17:52:01       64 阅读
  2. LeetCode69. Sqrt(x)

    2024-01-25 17:52:01       52 阅读
  3. 代码随想录算法训练营29期Day29|LeetCode 491,46,47

    2024-01-25 17:52:01       61 阅读
  4. 数据结构刷题笔记

    2024-01-25 17:52:01       57 阅读
  5. 杂七杂八的命令

    2024-01-25 17:52:01       57 阅读
  6. 【Ubuntu】systemctl 命令

    2024-01-25 17:52:01       59 阅读
  7. Vue3全局组件和自定义指令

    2024-01-25 17:52:01       64 阅读
  8. Unity串口通信教程:基础知识和实践指南

    2024-01-25 17:52:01       60 阅读
  9. 阿里云对象存储(OSS)服务

    2024-01-25 17:52:01       62 阅读
  10. Vue 中如何模块化使用 Vuex

    2024-01-25 17:52:01       54 阅读