相关问题
#鸿蒙通关秘籍#如何创建和启动一个ServiceAbility?
1279浏览 • 1回复 待解决
#鸿蒙通关秘籍#怎么创建一个HSP模块?
1280浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何创建一个基础的HAP模块?
1385浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中创建一个可以动态更新的胶囊样式进度条?
991浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何创建一个继承AttributeModifier的ImageModifier类?
1062浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何创建一个自定义弹窗(CustomDialog)?
1600浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何创建一个带有父组件的绘制组件,实现类似SVG的效果?
856浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙工程中创建一个ArkTS卡片?
1305浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何创建一个垂直滚动的简单列表?
1102浏览 • 1回复 待解决
#鸿蒙通关秘籍# DevEco Studio如何创建一个新的HarmonyOS项目?
1425浏览 • 1回复 待解决
如何实现一个带有动画效果的导航栏?
552浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙设备上利用动画特性实现动态效果?
1429浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何动态绑定属性以实现网格展示的动画效果?
873浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何创建一个Task并指定执行的函数?
1334浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS NEXT中选择合适的动画曲线创建自然动画效果
1235浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙轻内核中创建一个双向循环链表?
1070浏览 • 1回复 待解决
#鸿蒙通关秘籍#DevEco Studio中如何创建一个新内存分析任务?
1054浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在ArkUI中创建一个自定义弹窗?
1145浏览 • 1回复 待解决
#鸿蒙通关秘籍#创建多个Radio时如何确保只有一个被选中?
1196浏览 • 1回复 待解决
#鸿蒙通关秘籍#怎么在DevEco Studio中创建一个EmbeddedUIExtensionAbility?
1446浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中创建一个简单的Form表单容器?
1210浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙LiteOS-M中如何创建一个新的中断?
1060浏览 • 1回复 待解决
在鸿蒙应用里,如何实现一个带有动画效果的导航栏?
565浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何模拟一个appCrash?
1026浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中创建一个线性样式的进度条?
1007浏览 • 1回复 待解决
可以通过设置组件的位置与透明度,实现动态扩展的涟漪效果。以下代码展示了如何通过scale和opacity属性来实现动画。 html <!-- xxx.hml --> <div class="container"> <div class="circle"> <text>ripple</text> </div> <div class="ripple"></div> <div class="ripple ripple2"></div> </div>
css /* xxx.css */ .container { flex-direction: column; background-color:#F1F3F5; width: 100%; position: relative; } .circle{ margin-top: 400px; margin-left: 40%; width: 100px; height: 100px; border-radius: 50px; background-color: mediumpurple; z-index: 1; position: absolute; } .ripple{ margin-top: 400px; margin-left: 40%; position: absolute;
z-index: 0; width: 100px; height: 100px; border-radius: 50px; background-color: blueviolet; animation: ripple 5s infinite; } .ripple2{ animation-duration: 2.5s; } @keyframes ripple{ 0%{ transform: scale(1); opacity: 0.5; } 50%{ transform: scale(3); opacity: 0; } 100%{ transform: scale(1); opacity: 0.5; } } text{ color: white; text-align: center; height: 100%; width: 100%; }