TweenMax+svg+MorphSVGPlugin实现表情开关切换效果代码-html代码-BFW代码库

TweenMax+svg+MorphSVGPlugin实现表情开关切换效果代码

代码语言：html

所属分类：其他

代码描述：TweenMax+svg+MorphSVGPlugin实现表情开关切换效果代码

代码标签： TweenMax svg MorphSVGPlugin 表情开关切换

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

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

<head>
    <meta charset="UTF-8">

</head>

<body>
   <svg class="faceSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="happyMask"><circle class="happyMask" cx="467.68" cy="299.68" r="60" fill="#31b65a"/></clipPath></defs><rect class="panel" x="292" y="254" width="216" height="92" rx="46" ry="46" fill="#f6f6f6" stroke="#E6E6E6" stroke-miterlimit="10" stroke-width="4"/><g class="faceGroup" clip-path="url(#happyMask)"><circle class="faceBg" cx="467.68" cy="299.68" r="60" fill="#0CCE6B"/><path class="shadow" d="M468.42,360.58a60,60,0,0,1-54-33.83,60,60,0,0,0,104-59.34,60,60,0,0,1-50,93.17Z" fill="#31b65a"/><g class="faceGroup"><g class="happyEyeGroup"><circle class="happyEyeL" cx="449.58" cy="290.24" r="7" fill="#FDFDFD"/><circle class="happyEyeR" cx="486.42" cy="290.24" r="7" fill="#FDFDFD"/></g><path class="happyMouth" d="M486.5,305.24a18.5,18.5,0,0,1-37,0Z" fill="#FDFDFD"/><path class="sadMouth" d="M485.5,324a18.51,18.51,0,1,0-37,0Z" fill="#FDFDFD"/></g></g></svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin.js"></script>
    <script >

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(a) {
        return document.querySelector(a)
    },
    selectAll = function(a) {
        return document.querySelectorAll(a)
    },
    faceGroup = select(".faceGroup"),
    shadow = select(".shadow"),
    panel = select(".panel"),
    faceBg = select(".faceBg"),
    happyMouth = select(".happyMouth"),
    happyEyeGroup = select(".happyEyeGroup"),
  .........完整代码请登录后点击上方下载按钮下载查看