1、新建html文档。
2、书写hmtl代码。
<div id="animationWindow"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
html5 svg世界地图热点动画特效
</div>
3、书写css代码。
<style>
body {
background-color: #153285;
overflow: hidden;
text-align: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#ani mationWindow {
width: 100%;
height: 100%;
}
</style>
4、书写并添加js代码。
<script src="js/bodymovin.min.js"></script>
<script>
var select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
animationWindow = select('#animationWindow'),
animData = {
wrapper: animationWindow,
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: 'world.json'
}, anim;
anim = bodymovin.loadAnimation(animData);
anim.setSpeed(1.4);
</script>
5、代码整体结构。
6、查看效果。
