html5+css3齿轮滚动动画代码  第1张

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

html5+css3齿轮滚动动画代码下载

来源:本站下载|   密码:无需密码|   大小:125KB|   下载次数:673次