抽奖箱子转动到箱子随机位置区间,巧妙利用Math.random

本文介绍如何使用CSS3实现元素的平滑动画过渡,并通过JavaScript生成随机位置,使元素在界面上进行平滑移动。文章详细展示了如何设置CSS3的transform属性来实现translateX效果,同时介绍了如何通过JavaScript计算随机的起始位置。
 let s = Math.floor(Math.random() * 10) / 10;
 this.w = `-${s * 箱子宽度}px`;

html界面则利用css3
:style=“{ transform: translateX(${w}) translateZ(0px) }”

css控制执行时间
will-change: transform; -webkit-transition: -webkit-transform 7s ease 1s; transition: transform 7s ease 1s;

生成大于等于0的区间且小于1*箱子宽度,即可随机生成10个最终的位置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值