html5+css3齿轮滚动动画代码

HTML5制作齿轮滚动动画效果。

文件引用：

<script src="js/move.js"></script>
<script>
setInterval(function () {
move('.sec4-img-1').set('bottom', '300px').set('opacity', '0').duration('2s').ease('in-out').end(function () {
move('.sec4-img-1').set('bottom', '561px').set('opacity', '1').duration('0.1s').end();
});
move('.sec4-img-2').rotate(360).duration('15s').end(function () {
move('.sec4-img-2').rotate(0).duration('0.01s').end();
});
move('.sec4-img-3').rotate(-360).duration('15s').end(function () {
move('.sec4-img-3').rotate(0).duration('0.01s').end();
});
move('.sec4-img-4').rotate(360).duration('15s').end(function () {
move('.sec4-img-4').rotate(0).duration('0.01s').end();
});
move('.sec4-img-5').rotate(-360).duration('15s').end(function () {
move('.sec4-img-5').rotate(0).duration('0.01s').end();
});
move('.sec4-img-6').rotate(360).duration('15s').end(function () {
move('.sec4-img-6').rotate(0).duration('0.01s').end();
});
move('.sec4-img-7').rotate(-360).duration('15s').end(function () {
move('.sec4-img-7').rotate(0).duration('0.01s').end();
});
}, 500);
</script>

演示地址：https://www.yanghuaxing.com/demo/20190112/

来自：

HTML5制作齿轮滚动动画效果-html5实例-xw素材网

 http://www.xwcms.net/js/html5sl/59855.html

×

选择打赏方式：

微信 QQ钱包 支付宝

打赏

打赏

打赏

多少都是心意！谢谢大家！！！