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.........完整代码请登录后点击上方下载按钮下载查看