css图片滚动

大得369

已于 2023-04-10 07:11:34 修改

阅读量428

点赞数

分类专栏： css 文章标签： css 前端 java

于 2022-07-31 16:28:13 首次发布

本文链接：https://blog.csdn.net/qq_34631220/article/details/126087125

版权

css 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<template>
	<view class="dade">
		<view>
			<image class="dade_img" src="https://xcx.youmeichenpin.com//static/cj/800.jpg"></image>
		</view>
		<view>
			<view class="dade_ti">
				<image class="dade_imgs" src="https://xcx.youmeichenpin.com//static/cj/kuang.png"></image>
			</view>
			<view class="dade_ti1">
				<view class="dade_imgs">
					<view style="display: flex;" v-for="it in index">
						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/1.png"></image></view>
						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/2.png"></image></view>
						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/3.png"></image></view>
						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/4.png"></image></view>
						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/5.png"></image></view>
						<view><image class="dade_imgs1" src="https://xcx.youmeichenpin.com/static/cj/6.png"></image></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				index:[1,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,32,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2],
				dade:[]
			}
		},
		onLoad() {
			

		},
		onReady() {
			
		},
		onShow: function() {
			
		},

		methods: {
			// 签到
			goSignIn() {
				uni.navigateTo({
					url: '/pages/users/user_sgin/index'
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.dade{
		width: 100%;
		height: 100%;
		.dade_img{
			width: 750rpx;
			height: calc(100vh);
			z-index: 2;
		}
		.dade_ti{
			position: absolute;
			top: 30%;
			width: 700rpx;
			left: 25rpx;
			z-index: 10;
			.dade_imgs{
				width: 100%;
				height: 350rpx;
			}
		}
		.dade_ti1{
			position: absolute;
			top: 34.8%;
			width: 550rpx;
			left: 100rpx;
			z-index: 10;
			.dade_imgs{
				display: flex;
				overflow: auto;
				width: 550rpx;
				.dade_imgs1{
					animation: rolling 20s linear infinite;
					@keyframes rolling {
						from {
							transform: translateX(0);
						}
							
						to {
							transform: translateX(-1000%);
						}
					}
					width: 170rpx;
					height: 230rpx;
					margin-left: 10rpx;
				}
			}

		}
	}
	
		
</style>