svg地图路线轨迹特效代码下载


svg地图路线轨迹特效代码下载
svg地图路线轨迹特效代码下载以及地图路线轨迹等js/jquery网页特效代码下载。

1. 引入CSS

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css'>
<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="section-fluid-main">
	<div class="section-row">
		<input class="goal-btn" type="radio" id="goal-1" name="goal-btn" checked/>
		<label for="goal-1">Goal 1</label> 
		<input class="goal-btn" type="radio" id="goal-2" name="goal-btn"/>
		<label for="goal-2">Goal 2</label> 
		<input class="goal-btn" type="radio" id="goal-3" name="goal-btn"/>
		<label for="goal-3">Goal 3</label> 
		<input class="goal-btn" type="radio" id="goal-4" name="goal-btn"/>
		<label for="goal-4">Goal 4</label> 
		<input class="goal-btn" type="radio" id="goal-5" name="goal-btn"/>
		<label for="goal-5">Goal 5</label> 
		<input class="goal-btn" type="radio" id="goal-6" name="goal-btn"/>
		<label for="goal-6">Goal 6</label> 
		<div class="section-col-1">
			<div class="section">
				<img src="img/ny.png" alt="">
				<div class="section-svg-wrap">
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1651" height="1080" viewBox="0 0 1651 1080" class="svg-path">
						<path id="Path_1" data-name="Path 1" d="M404.981,154.294,392.6,290.4,570.242,451.406V587.588L438.28,818l44.826,26.818L655.337,575.833l83.749,50.729,114.467,48.48L890.1,587.588l114.8,38.975,64.291-167.92,10.766-51.152,145.387,59.759,176.885-324.21L1190.381,25.511l-94.638,176.567-68.217-38.143L996.82,214.586,957.937,356.014,828.7,302.067,648.12,187.658Z" fill="none"/>
					</svg>
					<div class="tooltip goal-1">
						<p><i class='bx bx-walk'></i> 20 min</p>
						<h6>0.9 miles - 47 kcal</h6>
					</div>
					<div class="tooltip goal-2">
						<p><i class='bx bx-walk'></i> 41 min</p>
						<h6>1.9 miles - 102 kcal</h6>
					</div>
					<div class="tooltip goal-3">
						<p><i class='bx bx-walk'></i> 60 min</p>
						<h6>2.7 miles - 146 kcal</h6>
					</div>
					<div class="tooltip goal-4">
						<p><i class='bx bx-walk'></i> 80 min</p>
						<h6>3.7 miles - 202 kcal</h6>
					</div>
					<div class="tooltip goal-5">
						<p><i class='bx bx-walk'></i> 105 min</p>
						<h6>4.8 miles - 267 kcal</h6>
					</div>
					<div class="tooltip goal-6">
						<p><i class='bx bx-walk'></i> 130 min</p>
						<h6>6.0 miles - 347 kcal</h6>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

相关推荐

发表评论

相关文章