可拖拽旋转的指南针特效【原创】

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好指南针的箭头和方向文字等内容，代码如下：

<div class="compass">
  <div class="compass__bg">
    <span class="compass__bg__ns"></span>
    <span class="compass__bg__ew"></span>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 684 683.9" style="enable-background:new 0 0 684 683.9;" xml:space="preserve">
<style type="text/css">
	.st2{fill:#3C92CA;}
</style>

<path d="M339.4,115.2c60.5-0.8,117.8,22.2,161.2,64.6l1.4,1.4l-27.5,0.3c-5,0.1-9,4.2-9,9.2c0.1,5,4.1,9,9.1,9h0.1l49.4-0.6
	c5-0.1,9-4.2,9-9.2l-0.6-49.4c-0.1-5-4.2-8.9-9.2-9c-5,0.1-9,4.2-9,9.2l0.3,27.5l-1.4-1.4C467.1,121.7,406.4,97,342,97
	c-1,0-1.9,0-2.9,0c-65.3,0.8-126.6,27-172.3,73.8c-32.7,33.5-55.1,75.4-64.6,121c-9.3,44.4-6.1,90.5,9.2,133.1c1.3,3.7,4.8,6,8.5,6
	c1,0,2-0.2,3.1-0.5c4.7-1.7,7.2-6.9,5.5-11.6c-29.6-82.5-10-172.7,51.3-235.4C222.1,140.2,278.8,115.9,339.4,115.2z"/>
<path d="M342,586.9c63.7,0,127.3-24.6,175.2-73.6c32.8-33.5,55.1-75.4,64.6-121c9.3-44.4,6.1-90.5-9.2-133.1
	c-1.7-4.7-6.9-7.2-11.6-5.5c-4.7,1.7-7.2,6.9-5.5,11.6c29.6,82.5,10,172.7-51.3,235.4C459.9,546,400.9,568.8,342,568.8
	c-57.2,0-114.5-21.5-158.5-64.5l-1.4-1.4l27.5-0.3c5-0.1,9-4.2,9-9.2c-0.1-5-4.1-9-9.1-9h-0.1l-49.5,0.6c-2.4,0-4.7,1-6.4,2.7
	s-2.6,4-2.6,6.4l0.6,49.4c0.1,5,4.1,9,9.1,9h0.1c5-0.1,9-4.2,9-9.2l-0.3-27.5l1.4,1.4C218.4,563.8,280.2,586.9,342,586.9z"/>
</svg>

  </div>
  <div class="compass__arrow">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 684 683.9" style="enable-background:new 0 0 684 683.9;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3C92CA;}
</style>

		<path class="st0" d="M339.9,212.2c1.8-1.8,4.2-1.2,5.2,1.5c2.5,6.4,4.8,12.7,7.2,19.1c24.8,66.2,49.6,132.4,74.4,198.5
			c0.6,1.7,1.2,3.4-0.3,4.8c-1.5,1.5-3.2,0.8-4.8,0.1c-26.6-11.4-53.2-22.7-79.8-34.2c-26.5,11.4-53.1,22.7-79.6,34
			c-1.7,0.7-3.2,1.4-4.8,0c-1.7-1.5-1.1-3.3-0.5-5c27.2-72,54.4-144,81.6-216.1C338.9,214.1,339.1,213,339.9,212.2z"/>

	<path d="M359.1,225c-1.8-4.9-3.6-9.7-5.5-14.6c-2-5.1-6.5-8.4-11.5-8.4c-3.2,0-6.2,1.3-8.6,3.6c-2.2,2.1-3,4.5-3.4,5.8l-0.1,0.3
		c-17.6,46.5-35.2,93.1-52.7,139.6l-28.9,76.4c-2.3,6.1-1.4,11.2,2.8,15c2.3,2.1,5.1,3.2,8.1,3.2c2.7,0,4.9-0.9,6.4-1.5l26.7-11.4
		c16.4-7,32.9-14,49.3-21.1c18.1,7.8,36.2,15.6,54.4,23.3l21.9,9.3c1.3,0.6,3.6,1.5,6.3,1.5c3.1,0,6.1-1.2,8.4-3.5
		c3.8-3.7,4.6-8.6,2.4-14.5c-20.4-54.4-40.8-108.9-61.2-163.4L359.1,225z M403.3,418.6c-19.3-8.3-38.6-16.5-57.9-24.8
		c-1.1-0.5-2.4-0.7-3.6-0.7s-2.4,0.2-3.6,0.7c-17.6,7.6-35.2,15.1-52.8,22.6l-15.8,6.7l24.6-65.3c15.9-42.2,31.9-84.5,47.8-126.7
		v0.1l14.9,39.8c19,50.7,38,101.4,57,152L403.3,418.6z"/>
</svg>
    
  </div>
</div>

页面的底部，需引入必要的JS文件，代码如下：

<script type="text/javascript" src="js/index.js"></script>