gsap+MorphSVGPlugin+svg实现一个小人表情评分效果代码-html代码-BFW代码库

gsap+MorphSVGPlugin+svg实现一个小人表情评分效果代码

代码语言：html

代码描述：gsap+MorphSVGPlugin+svg实现一个小人表情评分效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
	font-family: sans-serif;
	width: 100%;
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
svg {
	width: 400px;
}
.body {
	fill: #2EB7CE;
}
.card {
	cursor: pointer;
}
text,
.card path {
	fill: #95B0B6;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.card--selected path {
	fill: #000;
	opacity: 1;
}
.cards-number {
	fill: #fff;
	font-size: 40px;
}
</style>



</head>

<body >
  <svg viewBox="0 40 947 650" >

    <text text-anchor="middle" x="473" y="110" font-size="40">hi! wanna your experience?</text>

    <g>
        <path class="body" d="M576,362c-14-59,4.7-91.4-10-133c-14.9-42.3-63-66.1-119-59c-56.4,7.2-89.8,59.4-99,97c-6.9,28.1,2.7,34.8,6,92c5.1,88.4-59,134,79,137c68.8,1.5,145-1,158-47C597,427.7,584.3,396.8,576,362z" />
        <path class="eye eye--left" d="M433.9,244c5.3,0.6,9,8.1,8.2,16.8c-0.8,8.7-5.8,15.4-11.1,14.8c-5.3-0.6-9-8.1-8.2-16.8 C423.6,250.1,428.6,243.5,433.9,244z" />
        <path class="eye eye--right" d="M508.3,270.5c-5,0.2-9.3-6.2-9.6-14c-0.3-7.9,3.5-14.4,8.5-14.5c5-0.1,9.3,6.2,9.6,14 C517.1,263.9,513.3,270.4,508.3,270.5z" />
        <path class="month month" d="M483.8,292.3c11.1,7,18.9,16.9,15,27.4s-16.3,11.1-29.4,10.6c-16.7-0.7-18.9-16.9-15-27.4 C458.4,292.3,470.1,283.7,483.8,292.3z" />
        <g class="eyebrow--girl">
            <path class="eyebrow eyebrow--left" d="M373,280c-0.6,0.5-1.3,0.8-2.1,0.9c-2,0.2-3.7-1.3-3.9-3.3c-0.1-1.2-2.3-29.9,17.4-57.7 c1.1-1.6,3.4-2,5-0.8c1.6,1.1,2,3.4,0.8,5c-18.3,25.7-16.2,52.7-16.1,53z" />
            <path class="eyebrow eyebrow--second" d="M348.9,294.7c-0.7,0.9-1.7,1.5-2.8,1.8c-2.8,0.7-5.6-1.1-6.3-3.9c-0.4-1.7-10-42.9,12.6-87.6 c1.3-2.6,4.5-3.6,7-2.3c2.6,1.3,3.6,4.5,2.3,7c-20.9,41.3-11.9,80-11.8,80.4z" />
            <path class="eyebrow eyebrow--right" d="M546.4,223.6c0.2-0.7,0.6-1.3,1.2-1.7c1.5-1,3.5-0.7,4.6,0.8c0.6,0.9,15.6,22.7,12.7,53.8	c-0.2,1.8-1.8,3.1-3.6,3c-1.8-0.2-3.1-1.8-3-3.6c2.7-28.8-11.4-49.2-11.5-49.4z" />
            <path class="eyebrow eyebrow--second" d="M560.2,202.7c0.2-1,0.6-2,1.4-2.7c1.9-1.8,5-1.8,6.8,0.2c1.1,1.2,27.7,29.4,30.3,75.3 c0.2,2.7-1.9,4.9-4.5,5.1c-2.7,0.2-4.9-1.9-5.1-4.5c-2.4-42.3-27.4-68.9-27.6-69.2z" />
        </g>
        <path class="hand hand--left" d="M401.8,316.6c1.8,0,3.4,1.2,3.8,3c0.3,1.3,0.7,3.4,1,5.9c2.7-1.4,5.6-2.6,8.4-3.3c1.8-0.5,3.7,0.3,4.5,2 c0.9,1.6,0.4,3.7-1,4.8c-1.9,1.6-3.9,3-5.8,4.3c-4,2.9-7.9,5.6-10.5,9.5c-1.9,2.8-3.4,5.9-5.1,9.1c-1.8,3.6-3.7,7.3-6.1,10.8 c-4.2,6.1-7.1,12.4-7.6,16.8c-0.3,2.1-2.2,3.7-4.4,3.4c-2.1-0.3-3.7-2.2-3.4-4.4c1-8.1,6.6-16.9,8.9-20.3 c2.1-3.1,3.8-6.4,5.6-9.9c1.7-3.3,3.4-6.7,5.........完整代码请登录后点击上方下载按钮下载查看