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"), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0