首页 前端知识 css实现上下扫描动画

css实现上下扫描动画

2024-08-30 20:08:09 前端知识 前端哥 576 541 我要收藏

在这里插入图片描述

<view class="dunpai">
			<image src="../../../static/jk59/dunpai.png" mode=""></image>
			<view class="saomiao">

			</view>
			<text class="dunpai-baifenbi">35<text style="font-size: 30upx;">%</text></text>
		</view>

```html
.dunpai {
		width: 210upx;
		height: 210upx;
		margin: 0 auto;
		margin-top: 209upx;
		position: relative;
	}

	.dunpai image {
		width: 100%;
		height: 100%;
	}
.saomiao {
		width: 80%;
		height: 48px;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 10px;
		animation: move 1s ease-in-out infinite;
		-webkit-animation: move 1s ease-in-out infinite;

	}

	@keyframes move {
		from {
			top: 0px
		}

		/*网格移动到显示区域的外面*/
		to {
			top: 100px
		}
	}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17292.html
标签
评论
发布的文章

JWT(JSON WEB TOKEN)详解

2024-09-10 23:09:36

NPM 常用命令(十二)

2024-09-10 23:09:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!