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"/>
</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,3.2z"/>
<path class="p_2st2" d="M42.8,62.4c0,0-2.4-6.7,1-10.5c3.5-3.8,20.2-2.5,20.2-2.5s20.6-0.8,23.1,4.2c2.5,5-1,16.8-1,16.8L42.8,62.4z"
/>
<g>
<g>
<path class="p_2st3" d="M26,273.7l1.9-7.1l8.1,1.2l0.1,8c0,0-2.9,1.7-7.1,1.8C24.6,277.6,26,273.7,26,273.7z"/>
</g>
<g>
<polygon class="p_2st3" points="62.6,269.2 61.9,275 63.2,278.8 70.1,276.6 71.9,272.3 72.9,265.6 "/>
</g>
<g>
<path class="p_2st4" d="M86.9,279c-14.8-3.4-15-7.1-15-7.1c0,0-0.8,3.1-4.3,4.2c-2.4,0.7-5.7-1.2-5.7-1.2l-1.3,8.2h26.5
c0.6-0.3,0.8-0.9,0.8-0.9S89.8,279.7,86.9,279z"/>
</g>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="23.8372" y1="197.6475" x2="77.2865" y2="197.6475">
<stop offset="0" style="stop-color:#382E21"/>
<stop offset="1" style="stop-color:#594332"/>
</linearGradient>
<path class="p_2st5" d="M77.2,126.6c-5.1-0.4-10.2-0.8-15.3-1.2c-10-0.7-19.9-0.1-29.6-2.1c-1.4,19.3-8.4,146.9-8.4,146.9
s8.2,3.3,14.5,0.2l14.3-127.3l2.4,0.7l5.6,127.4c0,0,6.6,1.9,13.1-0.6c0,0,3.6-92,3.5-96.7C77.3,170.5,77.2,141.9,77.2,126.6z"
/>
</g>
<g>
<path class="p_2st4" d="M73.4,274l1.3-4.6c0,0-7.5-3-5.1,5.8L73.4,274z"/>
</g>
<g>
<polygon class="p_2st6" points="60.7,283.2 60.3,285.4 87.3,285.4 87.2,283.2 "/>
</g>
<g>
<polygon class="p_2st7" points="17.9,282.9 17.5,285.4 36.3,285.4 36.2,282.9 "/>
<path class="p_2st4" d="M17.9,282.9c0,0,0.5-2.8,2.7-5c2.2-2.2,3.1-3.7,3.1-3.7s-2-4.9-1-5.5s8.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.2H17.9z"/>
</g>
<g>
<path class="p_2st3" d="M36.3,105.9c3.2-5.2,5.1-15.9,5.1-15.9l-10-4.5L28.6,94L36.3,105.9z"/>
</g>
<g>
<path class="p_2st8" d="M33.2,86.3c-0.7-0.2-1.4-0.3-2.1-0.5l-1.4,4.3c2.6,1.4,5.3,2.8,7.9,4.3c0.8,0.4,1.6,0.8,2.4,1.1
c0.8-3.1,1.2-5.5,1.2-5.5L33.2,86.3z"/>
</g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="24.44" y1="159.8493" x2="65.0379" y2="51.5881">
<stop offset="0" style="stop-color:#103B4A"/>
<stop offset="1" style="stop-color:#4588AD"/>
</linearGradient>
<path class="p_2st9" d="M47.5,60.6l-0.7-6.1c0,0,9.2-1.9,16.5-1.7c7.3,0.1,16.3,1.6,16.3,1.6L78,62.9L47.5,60.6z"/>
<g id="XMLID_254_">
<g id="XMLID_255_">
<g>
<path class="p_2st6" d="M91.6,72.2c0,0-6.9,4.2-15.2,7.5c-1.8,0.7-3.7,1.4-5.6,2c-5,1.6-10.1,2.5-14.2,1.8
c-3-0.5-5.5-1.8-7.7-3.6c-2.1-1.7-3.8-3.8-5.2-5.9c-3.3-5.1-4.8-10.3-4.8-10.3s2.6-1.3,6-2.7c1.6-0.6,3.4-1.2,5.2-1.7
c0.2-0.1,0.5-0.1,0.8-0.2c5.4-1.6,12.4-5.5,24.3,1c0.6,0.3,1.3,0.7,1.9,1.1c1.1,0.8,2.4,1.5,3.7,2.2
C84.4,65.5,88.4,67.7,91.6,72.2z"/>
</g>
</g>
</g>
<g id="XMLID_252_">
<g id="XMLID_253_">
<g>
<path class="p_2st3" d="M56.8,60.2c1.9,1,3.4,1.5,5.4,1.6c2.9,0.1,4.7-1.9,4.7-1.9l6.1-21.6l-16,7.6l0.1,0.7L56.8,60.2z"/>
</g>
</g>
</g>
<g id="XMLID_251_">
<g>
<path class="p_2st8" d="M60.5,53.5c1.8-0.2,3.4-0.7,5-1.5c1.5-0.7,2.9-1.6,4.3-2.5l3.1-11.1l-16,7.6l0.1,0.7l-0.1,7.2
C58.1,53.7,59.3,53.7,60.5,53.5z"/>
</g>
</g>
<g>
<path class="p_2st6" d="M81,79.1L44.5,66.7c0,0-9.6,9-2.9,18.2l-11.8,42.8c0,0,26.8,13,49.5,1.2l-3.5-24.3
C75.8,104.5,79,83.2,81,79.1z"/>
</g>
<g>
<path class="p_2st3" d="M80.8,26.7c0,0,5.9-1.3,5.1,5.7c-0.8,7-5.9,7.2-7.4,7.5c0,0-2.8,12.5-18.3,11.3C44.8,50,47.3,38,47.4,30.1
c0.1-7.9-0.8-21.7,9.3-22.7C67,6.3,81.7,7,80.8,26.7z"/>
</g>
<g>
<g>
<path class="p_2st10" d="M62.9,25.2c-0.1-0.1,0.2-0.5,0.9-0.9c0.7-0.4,1.8-0.7,3-0.6c1.3,0.1,2.3,0.7,2.9,1.2
c0.3,0.3,0.5,0.5,0.6,0.7c0.1,0.2,0.1,0.3,0.1,0.4c0,0.1-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.2-0.8-0.4c-0.6-0.3-1.6-0.7-2.6-0.8
c-1.1-0.1-2,0.1-2.7,0.3C63.5,25.1,63,25.3,62.9,25.2z"/>
</g>
</g>
<g>
<g>
<path class="p_2st10" d="M57,24.9c-0.1,0.1-0.5-0.2-1.1-0.5c-0.6-0.3-1.5-0.7-2.6-0.8c-1-0.1-2,0.1-2.7,0.3
c-0.3,0.1-0.6,0.2-0.8,0.2c-0.2,0.1-0.3,0.1-0.4,0c0-0.1,0-0.2,0.2-0.3c0.2-0.2,0.4-0.4,0.8-0.6c0.7-0.4,1.8-0.7,3.1-0.6
c1.2,0.1,2.3,0.7,2.9,1.2C56.8,24.4,57.1,24.8,57,24.9z"/>
</g>
</g>
<g>
<path class="p_2st11" d="M65.1,38.3c-0.1,2.1,1.5,3.9,3.6,4c2.1,0.1,3.9-1.5,4-3.6c0.1-2.1-1.5-3.9-3.6-4
C66.9,34.6,65.1,36.2,65.1,38.3z"/>
</g>
<g>
<path class="p_2st11" d="M47.9,37.5c-0.1,2.1,1.5,3.9,3.6,4c2.1,0.1,3.9-1.5,4-3.6c0.1-2.1-1.5-3.9-3.6-4
C49.7,33.8,48,35.4,47.9,37.5z"/>
</g>
<g>
<path class="p_2st10" d="M64.4,30.2c-0.1,1.1,0.8,2.1,2,2.2c1.1,0.1,2.1-0.8,2.2-2c0.1-1.1-0.8-2.1-2-2.2
C65.4,28.2,64.5,29.1,64.4,30.2z"/>
</g>
<g>
<path class="p_2st10" d="M52.6,29.7c-0.1,1.1,0.8,2.1,2,2.2c1.1,0.1,2.1-0.8,2.2-2c0.1-1.1-0.8-2.1-2-2.2
C53.6,27.7,52.6,28.5,52.6,29.7z"/>
</g>
<g>
<g>
<defs>
<path id="SVGID_4_" d="M83.9,29.8c0.5,1.9-0.2,3.8-1,5.6c-0.2,0.5-0.5,1.1-0.9,1.4c-0.5,0.3-1.3,0.3-1.5-0.2
c-0.2-0.5,0.1-1.1,0.4-1.5c0.3-0.5,0.4-1.2,0-1.5c-0.2-0.1-0.5-0.1-0.7-0.2c-0.5-0.3-0.5-1-0.4-1.5c0.2-0.8,0.5-1.5,0.8-2.2
c0.4-0.7,1-1.4,1.7-1.3C83.1,28.3,83.7,29,83.9,29.8z"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_4_" style="overflow:visible;"/>
</clipPath>
<polygon class="p_2st12" points="79.6,32.5 82.2,37.2 79.6,37.2 "/>
<polygon class="p_2st12" points="81.3,28.2 84.4,33.8 84.4,37.2 82.2,37.2 79.6,32.5 79.6,28.2 "/>
<polygon class="p_2st12" points="84.4,33.8 81.3,28.2 84.4,28.2 "/>
</g>
</g>
<g>
<path class="p_2st8" d="M93.1,91.7c0,0-11.9-1.1-11.7,2.3c0.1,1.8,0.3,3.6,0.5,5.5c3.8-0.5,7.6-1.4,11.3-2.7
C93.1,94.6,93.1,92.8,93.1,91.7z"/>
</g>
<g>
<g>
<path class="p_2st8" d="M64,39.2c0.2,0.1,0.1,0.6-0.4,1.3c-0.5,0.7-1.4,1.5-2.6,2c-1.2,0.5-2.4,0.5-3.3,0.3
c-0.8-0.2-1.3-0.5-1.2-0.7c0.1-0.4,2-0.1,3.9-0.9C62.5,40.4,63.6,38.9,64,39.2z"/>
</g>
</g>
<g>
<g>
<path class="p_2st8" d="M59.5,37.1c0.1,0,0.2,0.2,0,0.5c-0.1,0.1-0.3,0.2-0.6,0.2c-0.1,0-0.3,0-0.4-0.1c-0.2-0.1-0.3-0.2-0.4-0.3
c-0.4-0.6-0.3-1.4,0.1-2c0.4-0.6,0.7-0.9,0.9-1.3c0.5-0.9,0.6-2,0.8-2.8c0.2-0.8,0.3-1.3,0.5-1.3c0.2,0,0.4,0.5,0.5,1.3
c0.1,0.8,0.1,2.1-0.6,3.4c-0.3,0.7-0.9,1.2-1.1,1.5c-0.3,0.3-0.3,0.5-0.3,0.7c-0.1,0.1,0.1,0.2,0.3,0.2
C59.3,37.2,59.4,37.1,59.5,37.1z"/>
</g>
</g>
</g>
<g>
<path class="p_2st3" d="M16.1,66.6c-0.3-1,1.4-5.2,2.1-7.9c0.7-2.7,0.4-5.5-0.4-5.6c-0.8-0.1-1.1,5.1-2.8,4.4
c-1.8-0.7-2.2-3.3-2.6-5.8c-0.4-2.5-0.6-8.9-1.8-8.3c-1.4,0.6,0.1,9.8-0.9,9.9c-0.7,0.1-2.5-9.1-4.1-9C3.9,44.5,8,53.7,7.1,54.7
c-0.9,1-3.8-8.4-5.2-7.7s3.4,9.7,2.9,10.5c-0.5,0.8-3.9-6.1-4.7-5.1c-0.9,1,3,7,5,10.1c2,3,5.2,7.3,5.8,8.1L16.1,66.6z"/>
<path class="p_2st3" d="M16.1,66.6c-1-1.5-3-1.9-4.5-1c-1.5,1-1.9,3-1,4.5c1,1.5,3,1.9,4.5,1C16.6,70.1,17.1,68.1,16.1,66.6z"/>
</g>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="9.0115" y1="154.064" x2="49.6096" y2="45.8021">
<stop offset="0" style="stop-color:#103B4A"/>
<stop offset="1" style="stop-color:#4588AD"/>
</linearGradient>
<path class="p_2st13" d="M17.4,116.2c6.9,4.9,13.8-1.9,13.8-1.9c-3.5,20.1-5.4,45.4-6.9,55.4h14.6C42.9,138.4,53.6,58,53.6,58
s-14.1,2.8-17,5.2c-2.9,2.4-12.2,31.3-12.2,31.3l-4.9-30.4L5.1,69.5C5.1,69.5,10.5,111.3,17.4,116.2z"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="55.5818" y1="171.5279" x2="96.1798" y2="63.2662">
<stop offset="0" style="stop-color:#103B4A"/>
<stop offset="1" style="stop-color:#4588AD"/>
</linearGradient>
<path class="p_2st14" d="M83.2,169.6l-1.8-27.4h9.2c0,0,2.8-41.4,2.5-53.3c-0.3-11.9-0.8-19.1-4-23.4c-2.5-3.4-17.7-7.9-17.7-7.9
C66.9,161.9,66,169.6,66,169.6H83.2z"/>
<g>
<path class="p_2st3" d="M81.5,142.2c-2,1.9-6,2.4-4.7,6c0,0-3.5,3.5-3,6c0.3,1.5,1.1,0.5,1.9,0.4c0.8-0.2,1.5,0.3,2.3,0.3
c0.9,0,2-0.4,3-0.4c1,0.1,2.3,1,3.3,0.7c1.2-0.5,1.5-2.3,1.9-3.3c0.4-0.9,1.1-4.5,1.8-9.6H81.5z"/>
</g>
<path class="p_2st2" d="M64.7,171.4c-0.7-1.8,0.1-4.1,1.8-5.2c1.7-1,4.1-0.6,5.4,0.9c0.6-1,2.1-1.7,3.2-1.7c1.2,0,2.4,0.6,3,1.6
c1.1-1.6,4.4-1.9,5.8-0.4c1.3,1.4,1,4-0.6,5.1c1.2,1.3,1.3,3.3,0.1,4.7c-1.2,1.3-3.5,1.5-4.9,0.4c-1.2,1.2-2.9,2.3-4.6,2
c-1.6-0.3-3.1-1.4-3.8-3c-1,0.5-2.1,0.9-3.2,0.8c-1.1-0.1-2.2-0.6-2.8-1.6C63.6,174,63.8,172,64.7,171.4z"/>
<path class="p_2st2" d="M21.5,171.4c-0.7-1.8,0.1-4.1,1.8-5.2c1.7-1,4.1-0.6,5.4,0.9c0.6-1,2.1-1.7,3.2-1.7c1.2,0,2.4,0.6,3,1.6
c1.1-1.6,4.4-1.9,5.8-0.4c1.3,1.4,1,4-0.6,5.1c1.2,1.3,1.3,3.3,0.1,4.7c-1.2,1.3-3.5,1.5-4.9,0.4c-1.2,1.2-2.9,2.3-4.6,2
c-1.6-0.3-3.1-1.4-3.8-3c-1,0.5-2.1,0.9-3.2,0.8c-1.1-0.1-2.2-0.6-2.8-1.6C20.3,174,20.5,172,21.5,171.4z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="20.737" y1="134.7106" x2="44.7951" y2="27.953">
<stop offset="0" style="stop-color:#103B4A"/>
<stop offset="1" style="stop-color:#4588AD"/>
</linearGradient>
<path class="p_2st15" d="M32.1,103c-1.1,5.6-8.5,12.7-13.2,14c6.4,3,12.3-2.8,12.3-2.8c2.3-14.3,8.5-41.1,8.5-41.1l-1-6.2
C38.7,66.9,33.8,94.7,32.1,103z"/>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="69.2904" y1="145.6522" x2="93.3486" y2="38.8944">
<stop offset="0" style="stop-color:#103B4A"/>
<stop offset="1" style="stop-color:#4588AD"/>
</linearGradient>
<polygon class="p_2st16" points="74.9,141.7 82.3,73.6 84.7,70.6 80.8,73.6 "/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="73.6358" y1="-17.0388" x2="59.0022" y2="64.909">
<stop offset="0" style="stop-color:#FFF1DC"/>
<stop offset="1" style="stop-color:#FFDEAD"/>
</linearGradient>
<path class="p_2st17" d="M43.8,23c2.9-0.9,6.1-0.8,9.2-0.8c3.1,0.1,6.3,0.1,9.2-1.1c2.9-1.1,5.4-3.7,5.6-6.8c0.6,4.2,3.4,7.9,7.4,9.2
c1.4,6,1.1,12.7,0.7,18.8c-0.1,1-0.1,2.1,0.4,3c0.5,0.9,1.8,1.4,2.5,0.7c0.6-0.6,0.5-1.6,0.4-2.4c-0.6-2.7-1.4-5.4-1.5-8.1
c-0.1-2.8,0.8-5.7,3-7.4c2.2-1.7,5.9-1.4,7.2,1c1.2-6.5-1.7-13.3-6.5-17.8S70.2,4.7,63.7,4c-5.2-0.5-11.1,0.2-14.4,4.2
C45.5,12.7,47.5,18.3,43.8,23z"/>
</g>
</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 91.1 291.2" style="enable-background:new 0 0 91.1 291.2;" xml:space="preserve">
<style type="text/css">
.p3st0{opacity:0.2;fill:#3E3533;}
.p3st1{fill:#FFC0A4;}
.p3st2{fill:url(#SVGID_1_);}
.p3st3{fill:#70B3BA;}
.p3st4{fill:#FBC4A9;}
.p3st5{fill:#F69D7D;}
.p3st6{fill:#CB4453;}
.p3st7{fill:#DD5664;}
.p3st8{fill:#FFFFFF;}
.p3st9{fill:#F9B092;}
.p3st10{fill:url(#SVGID_2_);}
.p3st11{fill:url(#SVGID_3_);}
.p3st12{fill:url(#SVGID_4_);}
.p3st13{fill:url(#SVGID_5_);}
.p3st14{fill:url(#SVGID_6_);}
.p3st15{fill:#FEFDFB;}
</style>
<g>
<ellipse class="p3st0" cx="43.4" cy="287.7" rx="43.4" ry="3.5"/>
<g>
<polygon class="p3st1" points="55,267.3 54.4,274.5 56.1,279.2 64.6,276.5 66.6,271.2 66.4,263.3 "/>
<g>
<polygon class="p3st1" points="28,276.1 29.2,267.6 19.4,267.6 18.7,279.3 "/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="40.2316" y1="70.8926" x2="45.6554" y2="230.8922">
<stop offset="0" style="stop-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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