html5 svg世界地图热点动画特效

1、新建html文档。

2、书写hmtl代艨位雅剖码。<div id="animationWindow">稆糨孝汶;</div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>html5 svg世界地图热点动画特效</p></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、查看效果。