CSS+JS的酷炫机器人舞蹈动画

前面介绍的《【高阶】原生JavaScript实现的酷炫效果 动态穿越》就是利用canvas实现的,今天我们继续来学习下CSS+JS实现的酷炫机器人舞蹈动画效果。

机器人舞蹈动画效果图

更多精彩内容请看web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

HTML代码

<head>
 <meta charset="UTF-8">
 <title>The Last Experience</title>
<script>
if (window.location.href.indexOf("fullcpgrid") > -1) {
	document.addEventListener('DOMContentLoaded', function() {
		const original = document.createElement('iframe');
		original.style.display = 'none';
		document.body.appendChild(original);
		window.requestAnimationFrame = original.contentWindow.requestAnimationFrame;
	}, false);
}
</script>
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
                  <canvas></canvas>
<script  src="js/index.js"></script>
</body>

CSS代码:

body, html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background:#000;
	cursor: pointer;
}

由于JS部分的代码有点多,就放在网盘中,大家可以点击下面链接进行下载

 

点击在线演示效果

抱歉,只有对本文发表过评论才能阅读隐藏内容。

web前端中文站点评:

这个项目是由前端大师Gerard Ferrandez进行创作的,web前端中文站收集回来给大家分享分享。如果对其中的代码运用掌握了之后,相信大家对js,甚至对前端有了更深层次的理解。更多前端demo实例见《web前端酷炫效果demo

1
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到

(1)条精彩评论:
  1. <a href='https://www.lisa33xiaoq.net/1312.html' rel='external nofollow' class='url'>wy</a>
    dfff
    wy2018-09-05 16:45 回复