当前位置: 首页 > 科技观察

HarmonyOS-方舟开发框架ArkUI流光按钮效果_0

时间:2023-03-16 17:14:41 科技观察

了解更多开源请访问:51CTO开源基础软件社区https://ost.51cto.com前言最近我们看到了一个很多按键边缘流光效果,今天我们使用HarmonyOS来实现。实现效果给自定义按钮添加动态样式,实现动态效果,通过这个实现思路,还可以改变div的样式,实现更多的按钮效果。实现原理在两个div之间画一个长的和短的div,并添加旋转嵌入效果,顶部div低于底部div,这样可以看到中间旋转div的动态效果。实现过程1.结构因为按钮不仅有视觉效果,还有文字提示,所以这里使用了一个自定义的标签text。当然,您也可以使用其他标签或不使用标签进行包装。先画一个粗略的按钮框。

按钮
2.样式首先需要给按钮一个基本样式,然后在基本样式中添加一个矩形div,然后让div旋转,如下:.button{width:150px;高度:80px;背景色:#ef437f;位置:相对;右边距:20px;显示:弹性;证明内容:居中;对齐项目:居中;5px;}这样我们就得到了一个粉色的矩形,然后对这个矩形进行一些处理,在中间添加一个稍长的矩形。.rotate{宽度:300px;高度:60px;顶部:10px;背景色:青色;位置:绝对;动画:无限旋转2s;官方文档介绍overflow的用法是visible、hidden、scroll,分别对应显示在div元素外和显示在div元素内。当元素的内容超过元素的大小时,执行滚动。我们只使用hiddeninoverflow。向上。名称类型默认值必填说明overflow6+stringvisible否设置元素内容区域超出元素本身大小时的表现形式。visible:当多个子元素的内容超出元素大小时,会显示在元素外;hidden:当元素内容超过元素大小时,将被裁剪显示;scroll:当元素内容超过元素大小时,会滚动显示,并带有滚动条(目前只支持垂直)。说明overflow:scroll样式要求元素设置为固定大小,默认滚动方向与容器的方向一致。溢出:隐藏;下一步是让蓝色的div旋转。同样的官方文档也给出了让它旋转的方法。这里有很多功能。官方的介绍也很详细。我们只介绍它使用的方法是给需要选中的div添加动画属性。animation:rotate2sinfiniteanimation该属性还可以控制旋转X、Y轴、速度、次数函数,rotate、2s、infinite分别代表默认轴,两秒无限播放。名称类型默认值说明animation-iteration-countnumber|infinite1定义播放动画的次数,默认播放一次,设置为infinite可以无限次播放。名称类型描述rotate||<毕业生>6+|6+旋转动画属性,支持设置x轴和y轴的选中参数。rotate3d6+<度>||<毕业>|四个输入参数,前三个为X轴、Y轴、Z轴的旋转向量,第四个为旋转角度。旋转X<度>||<毕业生>6+|6+X轴旋转动画属性。旋转Y<度>||<毕业生>6+|6+Y轴旋转动画属性。旋转Z6+<度>||<毕业>|Z轴的旋转角度。然后只需添加所选学位。我选择从0度旋转一个圈到360度,然后一直重复。.@keyframesrotate{from{transform:rotate(0deg)}to{transform:rotate(360deg);}}接下来要做的是添加一个较小的div来覆盖粉红色的div。.inside{宽度:144px;高度:74px;顶部:3px;左:3px;背景色:#5a5a5a;位置:相对;右边距:20px;显示:弹性;证明内容:居中;中心;位置:绝对;溢出:隐藏;/*当元素内容超出元素大小时,将被裁剪显示;*/}这样可以在按钮的边框显示流光效果。添加更多细节,例如圆角边框和文本。再添加一个点击时改变样式的按钮,这样一个带有流光效果的按钮就差不多了。...它没有其他方法可以达到这种效果并将其应用到您的项目中。了解更多开源信息,请访问:51CTO开源基础软件社区https://ost.51cto.com。