相关问题
Button是否支持默认状态是背景图片A,点击按下时是背景图片B,抬起手指恢复背景图片A
1340浏览 • 1回复 待解决
HarmonyOS 切换tabs的时候,该如何修改其他图片的背景图片
433浏览 • 1回复 待解决
HarmonyOS 背景图片如何填充满组件
1087浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在HarmonyOS Next中实现高效的数字滚动动画效果?
418浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中处理背景图和视频的沉浸式效果?
586浏览 • 1回复 待解决
HarmonyOS 深浅主题使用背景图片无法跟随切换
245浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现地址交换动画?
469浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何利用HarmonyOS模块实现数字滚动动画?
490浏览 • 1回复 待解决
HarmonyOS 如何设置状态栏为背景图片或颜色
365浏览 • 1回复 待解决
谁知道背景图片如何铺满?用的DirectionalLayout布局组件
8861浏览 • 3回复 待解决
#鸿蒙通关秘籍#如何实现使用Spring Curve的文本抖动动画?
476浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在ArkUI中实现背景模糊效果?
420浏览 • 1回复 待解决
#鸿蒙通关秘籍#在HarmonyOS Next地图组件中如何使用动画来移动相机位置?
472浏览 • 1回复 待解决
怎么实现text的背景图片随文本长度变化而伸缩,保持高度不变
1233浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中实现地址交换动画?
443浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现组件的滑入滑出动画效果?
678浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中显示网络图片?
492浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙项目中使用JS插值器动画实现元素的平移动画效果?
447浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中显示本地存档图片?
419浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中实现动画与手势的流畅衔接?
522浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中实现退出登录?
651浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为标题应用属性动画?
475浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在数字滚动动效中如何利用animateTo实现动画效果并刷新数字列表?
346浏览 • 0回复 待解决
HarmonyOS 扩展安全区域当使用背景图片时没有效果
402浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现HarmonyOS多点触控实现图片缩放和移动?
411浏览 • 1回复 待解决
背景图片的位置可以通过background-position属性来设置,从而实现移动动画。以下代码演示了背景图片在组件中的不同移动方式。 html <!-- xxx.hml --> <div class="container"> <div class="content"></div> <div class="content1"></div> </div>
css /* xxx.css */ .container { height: 100%; background-color:#F1F3F5; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .content{ width: 400px; height: 400px; background-image: url('common/images/bg-tv.jpg'); background-size: 100%; background-repeat: no-repeat; animation: change 3s infinite; border: 1px solid black; } .content1{ margin-top:50px; width: 400px; height: 400px; background-image: url('common/images/bg-tv.jpg'); background-size: 50%; background-repeat: no-repeat; animation: change1 5s infinite; border: 1px solid black; } @keyframes change{ 0%{ background-position:0px top; } 25%{ background-position:400px top; } 50%{ background-position:0px top; } 75%{ background-position:0px bottom; } 100%{ background-position:0px top; } } @keyframes change1{ 0%{ background-position:left top; } 25%{ background-position:50% 50%; } 50%{ background-position:right bottom; } 100%{ background-position:left top; } }