微信小程序之歌词ktv效果

效果图

html代码

<view wx:for="{{lyric}}" wx:key="index" class="box1231"><view style=" position: relative;"><view style="height:30px;position:relative;">{{item}}</view><view style="height:30px" id="hover" class="{{yinyueScrollIndex===index?'over':''}}" style="animation-duration:{{animations[index]-0.2}}s;">{{item}}</view><!--副歌词--></view>
</view>

css样式

.box1231 {display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;/* border: 1px solid #ccc; */position: relative;
}#hover {position: absolute;pointer-events: none;top: 0;left: 0;overflow: hidden;width: 100%;white-space: nowrap;
}.over {animation: test;animation-timing-function: linear;/* 速度 */animation-delay: 0s;/* 延时 *//* 动画迭代计数 */animation-direction: normal;color: rgb(19, 103, 212);
}@keyframes test {0% {width: 0px;}100% {width: 100px;}
}

微信小程序之歌词ktv效果相关推荐

微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
微信小程序实现点赞气泡效果
微信小程序实现点赞气泡效果先上代码: <view class="listImg"><block wx:for="{{8}}" wx:key= ...
ar 微信小程序_微信小程序可以实现AR效果了
微信小程序可以实现AR效果了金羊网作者:马化展 2019-07-08 金羊网讯记者马化展报道:7月5日,微信宣布微信小程序可实现AR效果了.同日,首个小程序AR动态试妆的美妆品牌小程序正式落 ...
微信小程序实现星星评价效果
这篇文章主要为大家详细介绍了微信小程序实现星星评价效果,支持多个条目评价,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内 ...
微信小程序实现星星评分效果
微信小程序实现星星评分效果思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了. 我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环 ...
微信小程序学习做动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信扫码学习,在线指导微信小程序动画效果的实现

微信小程序之歌词ktv效果

微信小程序之歌词ktv效果相关推荐

最新文章

热门文章