js+css实现拖动选择人数动画效果代码
代码语言：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"/&g.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0