uniapp实现图片上下浮动效果

实现效果

图片以Y轴进行上下浮动

实现代码
html 复制代码
<template>
	<view class="header">
	
		<view class="image-center">
			<image src="../../static/image/index_center.png" class="centers"></image>
		</view>
	</view>

</template>

<script setup>

</script>

<style lang="scss" scoped>
	.header {

		.image-center {
			width: 600rpx;
			height: 400rpx;

			.centers {
				width: 100%;
				height: 100%;
				animation: float 4s ease-in-out infinite;
				/* 控制动画的速度、时间、迭代次数等 */
			}

			@keyframes float {
				0% {
					transform: translateY(0);
				}

				50% {
					transform: translateY(-40rpx);
				}

				100% {
					transform: translateY(0);
				}
			}
		}


	}
</style>
相关推荐
listhi5201 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木1 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊1 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost2 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns2 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年3 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
00后程序员张3 小时前
如何提高 IPA 安全性 多工具组合打造可复用的 iOS 加固与反编译防护体系(IPA 安全 iOS 加固 无源码混淆 Ipa Guard 实战)
android·安全·ios·小程序·uni-app·iphone·webview
烛阴3 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心3 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart3 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter