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

代码语言：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.5-9.9c0.3-0.4,0.5-0.8,0.8-1.1c-1.4-0.6-2.7-1.3-3.9-2c-0.7-0.1-1.3-0.3-1.9-0.7 c-0.7-0.6-1.4-1.1-2.1-1.7c-1.5-1.4-1.7-3.6-0.5-5.2c1.2-1.6,3.4-2.1,5.1-1.1c0.7,0.4,1.4,0.8,2.1,1.2c0.9,0.6,1.8,1.1,2.7,1.6 c0-1.1,0-2.2-0.1-3.3c0-2-0.1-4,0-5.8c0.1-2,1.6-3.5,3.5-3.7C401.6,316.6,401.7,316.6,401.8,316.6z" />
        <path class="hand hand--right" d="M553.1,280.7c1.6,0.8,2.5,2.7,2,4.6c-0.9,3.1-3.7,6.7-7.7,11.5c-0.4,0.4-0.7,0.8-1,1.2 c1.3,2.5,2.2,5.3,3.1,7.8c0.5,1.7,1.1,3.2,1.6,4.5c2.2,5,5,9.6,7.9,14.6c2.3,3.9,4.8,8,6.8,12.1l1,1.9c5.6,11.3,11,23,9.6,30.2 c-0.4,2.1-2.5,3.5-4.6,3.1c-2.1-0.4-3.5-2.5-3.1-4.6c1-5.2-6.2-19.7-8.9-25.2l-1-1.9c-1.9-3.9-4.3-7.8-6.5-11.6 c-2.9-4.9-6-10-8.4-15.4c-0.7-1.6-1.3-3.5-1.9-5.2c-1.1-3.5-2.3-7.1-4.3-9.1c-1.8-1.7-4.6-2.6-7.6-3.6c-1.3-0.4-2.6-0.8-3.9-1.3 c-1.9-0.7-3-2.9-2.3-4.8c0.6-2,2.7-3.1,4.7-2.6l2.3,0.6c0.5,0.1,0.9,0.2,1.4,0.3c-0.7-2.2-1.1-4.4-1.5-6.3 c-0.3-1.6-0.6-3.1-1-4.3c-0.5-1.9,0.4-3.9,2.3-4.7c1.8-0.8,4,0,4.9,1.7c2.5,4.5,5,9.3,6.9,14.5c1.7-2.1,3.3-4.3,3.6-5.5 c0.6-2.1,2.7-3.3,4.8-2.7C552.6,280.5,552.8,280.6,553.1,280.7z" />
    </g>

    <g transform="translate(0 520)">
        <g class="card card--selected">
            <path d="M247.8,75.4l-3.1-0.5c-11.5-2.1-18.9-13.4-16.1-24.7l5.5-22.2c2.8-11.4,14.7-18.1,25.9-14.4l0,0c9.1,3,14.9,11.9,13.9,21.4l-2.4,22.8C270.2,69.2,259.4,77.4,247.8,75.4z"></path>
            <text class="cards-number" transform="matrix(1 0.27 -0.27 1 235 57)">1</text>
        </g>
        <g class="card">
            <path d="M305.5,92.7l-20-3.7c-6.4-1.2-10.8-7-10.2-13.5l3.4-37.7c0.7-7.5,7.8-12.8,15.2-11.2l21.9,4.7c6.5,1.4,10.8,7.6,9.8,14.1l-5.3,36.8C319.3,89.2,312.5,94,305.5,92.7z"></path>
            <text class="cards-number" transform="matrix(1 0.20 -0.20 1 284.5 72)">2</text>
        </g>
        <g class="card">
            <path d="M344.2,33.2l18.7,0c7.5,0,13.2,6.7,12,14.1L368,88c-1.2,7-8.1,11.5-14.9,9.7L338.6,94c-5.7-1.4-9.5-6.8-9.1-12.6l2.7-37C332.6,38.1,337.9,33.2,344.2,33.2z"></path>
            <text class="cards-number" transform="matrix(1 0.15 -0.15 1 336.5 78)">3</text>
        </g>
        <g class="card">
            <path d="M412.2,108.9l-26.8,0.3c-6.8,0.1-12-6-10.8-12.6l8.8-53.2c0.9-5.7,6.2-9.7,11.9-9l13.8,1.5c5.2,0.6,9.2,4.7,9.7,9.9l4.1,51.3C423.4,103.5,418.5,108.9,412.2,108.9z"></path>
            <text class="cards-number" transform="matrix(1 0.05 -0.05 1 385 86)">4</text>
        </g>
        <g class="card">
            <path d="M436.4,27.7l19.4-1.1c8.8-0.5,15.9,7.1,15,15.8l-6.8,60.1c-0.9,7.7-7.7,13.3-15.5,12.6l-7.1-0.6c-6.8-0.6-12.3-6-12.9-12.9L423,43.3C422.2,35.2,428.3,28.1,436.4,27.7z"></path>
            <text class="cards-number" transform="matrix(1 0.02 -0.02 1 433 80)">5</text>
        </g>
        <g class="card">
            <path d="M503.6,111.7l-20.2,0.6c-7.2,0.2-13-5.7-12.7-12.9l2.4-51c0.3-7.1,6.6-12.5,13.7-11.7l14.6,1.6c6,0.6,10.6,5.5,11,11.5l3.3,48.8C516,105.5,510.6,111.5,503.6,111.7z"></path>
            <text class="cards-number" transform="matrix(1 -0.02 0.02 1 483 85)">6</text>
        </g>
        <g class="card">
            <path d="M556.9,99.2L530,98.7c-6.2-0.1-11.4-4.9-11.9-11.1L515.2,54c-0.6-6.7,4.5-12.7,11.2-13.2l24.6-1.9c6.4-0.5,12.1,4.1,13,10.4l5.2,36C570.2,92.7,564.4,99.3,556.9,99.2z"></path>
            <text class="cards-number" transform="matrix(1 -0.08 0.08 1 533 85)">7</text>
        </g>
        <g class="card">
            <path d="M586,35.5l8.5-0.1c9-0.1,16.7,6.4,18.1,15.3l2.8,17.9c1.4,9.3-4.5,18.1-13.6,20.3L593,91c-10.4,2.5-20.8-4.6-22.1-15.3l-2.5-19.9C567,45.1,575.2,35.7,586,35.5z"></path>
            <text class="cards-number" transform="matrix(1 -0.11 0.11 1 582 79)">8</text>
        </g>
        <g class="card">
            <path d="M663.3,91.6L639.4,99c-7.1,2.2-14.5-2.4-15.6-9.8l-7.6-48.3c-1.1-6.8,3.7-13.2,10.6-14l17.9-2.1c5.8-0.7,11.3,2.9,13.1,8.4l13.6,43.1C673.3,82.7,669.7,89.6,663.3,91.6z"></path>
            <text class="cards-number" transform="matrix(1 -0.15 0.15 1 631 78)">9</text>
        </g>
        <g class="card">
            <path d="M671.6,15.4l40.1-12c6.9-2.1,14.1,2.3,15.5,9.3l8.8,44.6c1.3,6.4-2.7,12.6-9,14.2l-34.7,8.7c-6.1,1.5-12.4-1.9-14.5-7.9L663.6,31C661.4,24.4,665,17.3,671.6,15.4z"></path>
            <text class="cards-number" transform="matrix(1 -0.28 0.28 1 680.5 65)">10</text>
        </g>
    </g>
</svg>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin.js"></script>
      <script  >
// Global variables
const rateCards = Array.from(document.querySelectorAll('.card'));
let currentRate;

// Prepare graphics
initGraphics();

// trigger initial animations
TweenLite.delayedCall(0.7, changeRate, [7]);

// animate character on click
TweenLite.delayedCall(1.5, function () {
  rateCards.forEach(function (card, cardIdx) {
    card.onclick = function () {changeRate(cardIdx);};
  });
});

//--------------------------------------------------------------
// update buttons and animate the character

function changeRate(newRate) {
  if (currentRate !== newRate) {
    rateCards.forEach(function (card, idx) {
      if (idx > newRate) {
        card.classList.remove('card--selected');
      } else {
        card.classList.add('card--selected');
      }
    });
    currentRate = newRate;
    animateAvatar(newRate, 0.5);
  }
}

//--------------------------------------------------------------
// prepare graphics

function initGraphics() {
  TweenLite.set('.hand--right', {
    svgOrig.........完整代码请登录后点击上方下载按钮下载查看