js+css实现拖动选择人数动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：拖放
代码描述：js+css实现拖动选择人数动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    .people-selector {
  width: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -240px;
  margin-top: -30px;
}
* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
span {
  font-family: "Google Sans", "Product Sans", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 36px;
  with: 100%;
  text-align: center;
  margin-bottom: 30px;
  display: block;
}
div.range {
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 100px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
div.range button {
  cursor: -webkit-grab;
  cursor: grab;
}
div.range.dragging button {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
div.range div.options {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  border-radius: 48px;
}
div.range div.options button {
  color: #202124;
  font-family: "Google Sans", "Product Sans", Arial, Helvetica, sans-serif;
  font-style: normal;
  line-height: 1.5;
  border: none;
  background: none;
  font-size: 18px;
  flex-grow: 1;
  height: 48px;
  outline: none;
  position: relative;
}
div.range div.options button.selected {
  color: #fff;
}
div.range div.selected-bg {
  color: #FFFFFF;
  background: #1A73E8;
  box-shadow: 0px 2px 6px rgba(60, 64, 67, 0.15), 0px 1px 2px rgba(60, 64, 67, 0.3);
  border-radius: 100px;
  position: absolute;
  height: 40px;
  width: 80px;
  top: 3px;
  left: 0;
}
div.people {
  position: absolute;
  height: 60px;
  width: 200px;
  bottom: 48px;
  left: -75px;
  z-index: -1;
  overflow: hidden;
}
div.people svg {
  position: absolute;
  width: 35px;
  left: 100px;
  top: 30px;
  transform-origin: 17px 30px;
  transform: scaleY(0);
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="people-selector">
	<span>How many people on your party?</span>
	<div class="range">
		<div class="options">
			<div class="selected-bg"></div>
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
			<button>5</button>
			<button>6</button>
		</div>
	</div>
	
	
	
	
	
	
	
	<div class="people">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 109.1 291.4" style="enable-background:new 0 0 109.1 291.4;" xml:space="preserve">
<style type="text/css">
	.p1_st0{opacity:0.2;fill:#3E3533;}
	.p1_st1{fill:#E88D6A;}
	.p1_st2{fill:#FEFDFB;}
	.p1_st3{fill:#D2BAA7;}
	.p1_st4{fill:#8E7272;}
	.p1_st5{fill:#EFCBA7;}
	.p1_st6{fill:#330E00;}
	.p1_st7{fill:url(#SVGID_1_);}
	.p1_st8{fill:#FFFFFF;}
	.p1_st9{fill:#D5614A;}
	.p1_st10{fill:url(#SVGID_2_);}
	.p1_st11{fill:url(#SVGID_3_);}
	.p1_st12{fill:#E8795A;}
	.p1_st13{fill:#3E3533;}
	.p1_st14{fill:url(#SVGID_4_);}
</style>
<ellipse class="p1_st0" cx="51" cy="288" rx="43.2" ry="3.4"/>
<g>
	<g>
		<path class="p1_st1" d="M22.1,276.2l1.9-7.1l8.1,1.2l0.1,8c0,0-2.9,1.7-7.1,1.8C20.8,280.1,22.1,276.2,22.1,276.2z"/>
	</g>
	<g>
		<polygon class="p1_st2" points="14.1,285.4 13.7,288 32.4,288 32.4,285.4 		"/>
		<path class="p1_st3" d="M14.1,285.4c0,0,0.5-2.8,2.7-5s3.1-3.7,3.1-3.7s-2-4.9-1-5.5c1-0.6,8.6,0,8.6,0s-0.3,8.2,0.1,8.5
			c0.4,0.3,4.4-1.8,4.6-1.5c0.2,0.3,0.2,7.2,0.2,7.2H14.1z"/>
	</g>
	<path class="p1_st1" d="M83.2,60.9c5.8,2.4,26.4,49.1,25.9,54.8c-0.5,5.7-24.9,36.1-26.7,38.2c-1.8,2.1-6.2-0.1-6.2-0.1l4.1-11
		c0,0,4.7-20.8,8.7-28.4L73.6,86.4L83.2,60.9z"/>
	<path class="p1_st4" d="M87.2,111.3l17.6-14.5c0,0-13.9-31.6-21.7-35.9c-7.8-4.3-1.5,44.9-1.5,44.9L87.2,111.3z"/>
	<path class="p1_st5" d="M83.3,77.7L80,88.4c0.7,9.3,1.8,17.4,1.8,17.4l5.5,5.5l2.4-2L83.3,77.7z"/>
	<g id="XMLID_5_">
		<path id="XMLID_6_" class="p1_st6" d="M81.7,120.3c-0.4-1.4-0.7-2.2-0.7-2.2l-42.5,1.7c0,0-0.1,0.9-0.4,2.4c0.2,0.3,0.4,0.5,0.4,0.5
			C57.5,130.4,71.3,130.4,81.7,120.3z"/>
	</g>
	<path class="p1_st1" d="M24.2,63.2C19.7,65.2-0.5,110,0,115.7c0.5,5.7,32.9,38.2,32.9,38.2l1.6-8.6c0,0-9.4-27-14.4-30.7l15.3-28.1
		L24.2,63.2z"/>
	<g>
		<polygon class="p1_st1" points="62.8,269.2 61.7,275.4 62.8,279.5 70.3,277.2 72.5,272.6 74.1,265.4 		"/>
	</g>
	<g>
		<path class="p1_st3" d="M88.2,279.8c-15.7-3.7-15.6-7.6-15.6-7.6c0,0-1.1,3.3-5,4.5c-2.6,0.8-6-1.3-6-1.3l-1.9,8.9h28.5
			c0.6-0.3,0.9-0.9,0.9-0.9S91.2,280.5,88.2,279.8z"/>
	</g>
	<g>
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="48.0275" y1="263.9511" x2="60.666" y2="132.7048">
			<stop  offset="0" style="stop-color:#103B4A"/>
			<stop  offset="1" style="stop-color:#4588AD"/>
		</linearGradient>
		<path class="p1_st7" d="M83.8,128.5c0,0-3.4,56.2-3.7,61.3s-5.5,81.1-5.5,81.1c-7.1,2.6-16.2,0.6-16.2,0.6l-0.1-76.6l-1-40.9
			l-0.4-0.7c0,0-7.8,49.7-7.8,49.5c0-0.3-11.5,66.8-11.5,66.8c-7,3.3-16.6-0.3-16.6-0.3s6.2-65.1,5.9-68.9
			c-0.3-3.8,9.7-76.8,9.7-76.8L83.8,128.5z"/>
	</g>
	<g>
		<path class="p1_st3" d="M74.1,274.4l1.7-5c0,0-7.9-3.2-5.9,6.2L74.1,274.4z"/>
	</g>
	<g>
		<polygon class="p1_st8" points="59.8,284.3 59.2,286.7 88.2,286.7 88.3,284.3 		"/>
	</g>
	<path class="p1_st9" d="M87.3,143c0,0,3.5-4.2,1.9-5.9c-1.6-1.7-6.1,3-6.1,3L87.3,143z"/>
	<path class="p1_st9" d="M31.5,142.9c0,0-3.1-4.5-1.4-6c1.8-1.5,5.8,3.5,5.8,3.5L31.5,142.9z"/>
	<path class="p1_st4" d="M87.4,141.3l-4.1-63.6c5.6-13.4,1.4-16.5-3.1-18.4c-9.4-4-21.9-5.4-31.9-4.4c-4.9,0.5-9.9,1.5-14.6,3.1
		c-4.2,1.4-9.5,5.3-9.5,5.3c0,0,4.6,19.8,4.6,19.8l2.5,7.9l5.4,20l-4.5,31.1C32.1,141.9,66.8,155.5,87.4,141.3z"/>
	<g id="XMLID_3_">
		<g id="XMLID_4_">
			<path class="p1_st1" d="M48.4,58l-6.2-22.3l20.1,7.9l-0.2,0.7l-0.8,14c0,0-0.9,3.5-5.5,3.9C50.1,62.7,48.4,58,48.4,58z"/>
		</g>
	</g>
	<g id="XMLID_2_">
		<path class="p1_st9" d="M57.1,51.3c-2.4-0.2-4.4-0.8-6.4-1.6c-1.9-0.8-3.7-1.6-5.3-2.6l-3.2-11.5l20.1,7.9l-0.2,0.7l-0.4,7.4
			C60.2,51.5,58.6,51.5,57.1,51.3z"/>
	</g>
	<path class="p1_st1" d="M36.1,23.7c0,0-6-1.4-5.2,5.8c0.8,7.2,6.1,7.4,7.6,7.7c0,0,2.9,12.9,18.7,11.6c15.9-1.2,13.3-13.5,13.1-21.7
		c-0.1-8.1,0.8-22.3-9.6-23.3C50.3,2.8,35.2,3.5,36.1,23.7z"/>
	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="48.2207" y1="287.5691" x2="51.1374" y2="26.0535">
		<stop  offset="0" style="stop-color:#382E21"/>
		<stop  offset="1" style="stop-color:#594332"/>
	</linearGradient>
	<path class="p1_st10" d="M49.1,27.1c-0.1,1.1,0.8,2.1,1.9,2.2c1.1,0.1,2.1-0.8,2.2-1.9c0.1-1.1-0.8-2.1-1.9-2.2
		C50.1,25.1,49.1,25.9,49.1,27.1z"/>
	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="59.2257" y1="287.6973" x2="62.1424" y2="26.176">
		<stop  offset="0" style="stop-color:#382E21"/>
		<stop  offset="1" style="stop-color:#594332"/>
	</linearGradient>
	<path class="p1_st11" d="M60.1,27.4c-0.1,1.1,0.8,2.1,1.9,2.2c1.1,0.1,2.1-0.8,2.2-1.9c0.1-1.1-0.8-2.1-1.9-2.2
		C61.1,25.4,60.1,26.3,60.1,27.4z"/>
	<path class="p1_st12" d="M70.1,33.7c0.1,2.2-1.6,4-3.7,4.1c-2.2,0.1-4-1.6-4.1-3.7c-0.1-2.2,1.6-4,3.7-4.1
		C68.1,29.9,70,31.6,70.1,33.7z"/>
	<path class="p1_st12" d="M50.2,34.3c0.1,2.2-1.6,4-3.7,4.1c-2.2,0.1-4-1.6-4.1-3.7c-0.1-2.2,1.6-4,3.7-4.1
		C48.3,30.4,50.1,32.1,50.2,34.3z"/>
	<path class="p1_st12" d="M33,26.9c-0.6,1.9,0.2,3.9,1,5.8c0.2,0.5,0.5,1.1,1,1.5c0.5,0.3,1.3,0.3,1.5-0.2c0.2-0.5-0.1-1.1-0.4-1.6
		c-0.3-0.5-0.4-1.2,0-1.5c0.2-0.1,0.5-0.1,0.8-0.3c0.5-0.3,0.5-1,0.4-1.6c-0.2-0.8-0.5-1.5-0.9-2.2c-0.4-0.7-1-1.4-1.8-1.4
		C33.8,25.3,33.2,26.1,33,26.9z"/>
	<g>
		<path class="p1_st9" d="M58.3,35.6c0-0.2,0.6-0.5,0.8-1.3c0-0.2,0.1-0.4,0-0.6c0-0.2-0.1-0.4-0.3-0.7c-0.3-0.5-0.9-1.1-1.2-2
			c-0.3-0.9-0.3-1.8-0.2-2.5c0.1-0.7,0.3-1.3,0.4-1.9c0.3-1,0.4-1.6,0.6-1.6c0.2,0,0.4,0.7,0.4,1.8c0,1.1-0.3,2.6,0.1,3.8
			c0.2,0.6,0.7,1.2,1,1.9c0.2,0.4,0.3,0.8,0.3,1.2c0,0.4-0.1,0.8-0.3,1.1c-0.3,0.6-0.8,0.9-1.1,1C58.5,35.8,58.3,35.7,58.3,35.6z"/>
	</g>
	<g>
		<path class="p1_st13" d="M65.2,21.6c-0.2,0.4-1.7-0.1-3.5,0.3c-1.8,0.3-3,1.2-3.3,1c-0.1-0.1,0-0.6,0.6-1.1c0.5-0.5,1.4-1,2.5-1.2
			c1.1-0.2,2.1,0,2.8,0.3C65,21.1,65.3,21.4,65.2,21.6z"/>
	</g>
	<g>
		<path class="p1_st13" d="M54,21.2c-0.2,0.4-1.7,0-3.3,0.6c-1.7,0.5-2.8,1.6-3.1,1.4c-0.2-0.1-0.1-0.6,0.4-1.2
			c0.4-0.6,1.3-1.2,2.3-1.6c1.1-0.3,2.1-0.2,2.8,0C53.7,20.6,54,21,54,21.2z"/>
	</g>
	<g>
		<path class="p1_st9" d="M61.9,37.9c0.1,0.2-0.3,0.6-1.2,1c-0.9,0.4-2.3,0.6-3.8,0.2c-1.5-0.4-2.6-1.3-3.2-2.1
			c-0.6-0.8-0.7-1.4-0.5-1.5c0.3-0.2,1.7,1.6,4.1,2.2C59.7,38.5,61.8,37.6,61.9,37.9z"/>
	</g>
	<g>
		<path class="p1_st1" d="M82.7,156.6c0-5,0.1-10,0.2-15c6.9-1.8,10-2.6,10.3-0.3c0.3,2.6-3.4,4.2-3.4,4.2s2.6,3.2-0.2,4.4
			c-2.8,1.2-0.6,0.8-2.1,4.9C86.4,157.9,84.7,156.6,82.7,156.6z"/>
		<path class="p1_st1" d="M89.3,140.1c-7.3,0.7-14.8,4.9-7.7,6.6c0,0-6.8,5,1.1,5.3c0,0-6.7,6.1,2.4,4.9L89.3,140.1z"/>
	</g>
	<g>
		<path class="p1_st1" d="M34.9,156.9c0.4-5,0.8-10,1.1-15c-6.8-2.4-9.7-3.5-10.2-1.2c-0.5,2.5,3,4.5,3,4.5s-2.9,2.9-0.2,4.4
			c2.7,1.5,0.5,0.8,1.6,5C31.1,157.8,32.9,156.7,34.9,156.9z"/>
		<path class="p1_st1" d="M29.8,139.8c7.2,1.4,14.3,6.2,7.1,7.3c0,0,6.3,5.6-1.5,5.1c0,0,6.2,6.7-2.8,4.6L29.8,139.8z"/>
	</g>
	<path class="p1_st4" d="M24.2,63.2c-8.9,7.2-22.7,36-22.7,36l21.6,11.5l10.2-20.2L24.2,63.2z"/>
	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="48.6338" y1="287.5786" x2="51.5505" y2="26.058">
		<stop  offset="0" style="stop-color:#382E21"/>
		<stop  offset="1" style="stop-color:#594332"/>
	</linearGradient>
	<path class="p1_st14" d="M36.1,23.7c1.2,0.3,3.4,4.6,3.5,10l1.3,0.7l0.7-3.3c0,0,4.6-3.8,4.4-13.9c0,0,5,1.4,12.8,1.4
		c4.7,0,11.2-1.4,11.2-1.4S70.6,4.2,59.4,1.4C45.8-2.1,39.9,1.6,35.7,6.5S34,23.5,34,23.5S34.7,23.4,36.1,23.7z"/>
</g>
</svg>
		
		<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 104.7 288.7" style="enable-background:new 0 0 104.7 288.7;" xml:space="preserve">
<style type="text/css">
	.p_2st0{opacity:0.2;fill:#3E3533;}
	.p_2st1{fill:url(#SVGID_1_);}
	.p_2st2{fill:#D8936C;}
	.p_2st3{fill:#FBC0A4;}
	.p_2st4{fill:#FF554A;}
	.p_2st5{fill:url(#SVGID_2_);}
	.p_2st6{fill:#FFFFFF;}
	.p_2st7{fill:#FEFDFB;}
	.p_2st8{fill:#F69D7D;}
	.p_2st9{fill:url(#SVGID_3_);}
	.p_2st10{fill:#3E3533;}
	.p_2st11{fill:#F9B092;}
	.p_2st12{clip-path:url(#SVGID_5_);fill:#F69D7D;}
	.p_2st13{fill:url(#SVGID_6_);}
	.p_2st14{fill:url(#SVGID_7_);}
	.p_2st15{fill:url(#SVGID_8_);}
	.p_2st16{fill:url(#SVGID_9_);}
	.p_2st17{fill:url(#SVGID_10_);}
</style>
<g>
	<ellipse class="p_2st0" cx="49.6" cy="285.4" rx="40.5" ry="3.2"/>
	<g>
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="79.5903" y1="-15.9755" x2="64.9567" y2="65.9724">
			<stop  offset="0" style="stop-color:#FFF1DC"/>
			<stop  offset="1" style="stop-color:#FFDEAD"/>
		</linearGradient>
		<path class="p_2st1" d="M52.5,3.2c-3.9,1.9-7.5,4.6-10,8.1c-5.6,7.4-2.3,19.1-7.8,26.7c-2.1,3-5.3,4.9-7.5,7.9
			c-2.5,3.4-3.4,8.2-2.3,12.4c0.8,3.2,2.7,6.1,2.8,9.4c0.1,5.8-5.3,9.9-6.9,15.4c-1.9,6.3,2.4,13.8,8.6,15c4.3,0.8,8.9-1,12.9,0.8
			c4.6,2.1,6.3,8.1,9.9,11.7c4.3,4.3,11.5,4.6,16.1,0.7c2.1-1.8,4-4.4,6.7-4.7c2.7-0.2,5,2.1,7.4,3.4c5.3,2.9,12.3,0.8,16.2-4.1
			c3.8-4.9,4.8-11.9,3.4-18.1c-1-4.5-3-8.8-2.5-13.4c0.4-4.1,2.8-7.6,4.1-11.4c2-5.9,1.5-12.4-1.7-17.6c-2-3.2-4.5-6.1-5.9-9.5
			c-2-4.6-2-9.9-3.3-14.8C89.7,10,79.8,1.5,69,0.2C63.6-0.5,57.7,0.6,52.5.........完整代码请登录后点击上方下载按钮下载查看