3d抽奖动画
·
<html>
<head>
<style>
body {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
background: black;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.particule {
position: absolute;
}
</style>
</head>
<body>
<!-- <img src="./img/1.jpg" alt=""> -->
</body>
<script crossorigin="anonymous" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
<script crossorigin="anonymous" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" src="https://lib.baomitu.com/animejs/3.2.1/anime.min.js"></script>
<script>
var numberOfEls = 1500;
var duration = 1500;
var midScreenX = window.innerWidth / 2;
var midScreenY = window.innerHeight / 2;
var radius = Math.sqrt(midScreenX * midScreenX + midScreenY * midScreenY);
var fragment = document.createDocumentFragment();
for (var i = 0; i < numberOfEls; i++) {
var hue = Math.round(360 / numberOfEls * i);
var angle = Math.random() * Math.PI * 2;
var el = document.createElement('div');
el.classList.add('particule');
el.style.backgroundImage = 'url("https://eventimg.oss-cn-shenzhen.aliyuncs.com/digital_conference_system/images/interaction/scan_code_icon_blue.png")';
el.style.width = '10px';
el.style.height = '10px';
anime({
targets: el,
width: ['10px', '50px'],
height: ['10px', '50px'],
left: [midScreenX + 'px', Math.cos(angle) * radius + midScreenX + 'px'],
top: [midScreenY + 'px', Math.sin(angle) * radius + midScreenY + 'px'],
delay: (duration / numberOfEls) * i,
duration: duration,
easing: 'easeInExpo',
loop: true
});
fragment.appendChild(el);
}
document.body.appendChild(fragment);
</script>
</html>效果图:
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)