一个用CSS3制作的笑脸/哭脸表情变换开关按钮

首页 > IT技术

作者：起点终站

2017年8月2日 15:38 星期三

字号：小中大

评论：0

今天在网上看到一有趣的开关按钮的制作，用到了SVG、css3和js，下面的演示中还引用了TweenMax.min.js，这是一个js动画工具库。

点击试试吧

以下为全部代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 笑脸/哭脸开关按钮 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
body {
  background-color:#FFF;
  overflow: hidden;
  text-align:center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
 position:absolute;
  width:100%;
  height:100%;
  visibility:hidden;
  transform:translate(-50%, 0%);
}

.faceGroup{
 cursor:pointer;
}
.faceGroup, .panel{
 
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
</style>
<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="https://demo.hellozwh.com/source/TweenMax.min.js"></script>
<script>
//TweenLite.defaultOverwrite = "concurrent"
var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    faceGroup = select('.faceGroup'),
    shadow = select('.shadow'),
    panel = select('.panel'),
    faceBg = select('.faceBg'),
    happyMouth = select('.happyMouth'),
    happyEyeGroup = select('.happyEyeGroup'),
    sadMouth = select('.sadMouth'),
    happyEyeR = select('.happyEyeR'),
    happyEyeL = select('.happyEyeL')
  

TweenMax.set('svg', {
  visibility: 'visible'
})

TweenMax.set([happyEyeL, happyEyeR], {
 transformOrigin:'50% 50%'
})
TweenMax.set(happyEyeGroup, {
 transformOrigin:'50% 60%'
})
TweenLite.defaultEase = Expo.easeIn;

var toggleTl = new TimelineMax({paused:true}).timeScale(4);
toggleTl.to(happyMouth, 2, {
 scaleX:0,
 scaleY:1.23,
 x:-56,
 fill:'#E6E6E6'
},'+=0')
.to(happyEyeL, 2, {
 scaleX:0,
 scaleY:1.2,
 x:-50,
 y:2,
 fill:'#E6E6E6'
},'-=2')
.to(happyEyeR, 2, {
 scaleX:0,
 scaleY:1.23,
 x:-85,
 fill:'#E6E6E6'
},'-=2')

.set(happyEyeR, {
 scaleX:0,
 scaleY:1.23,
 x:60,
 y:9,
 fill:'#E6E6E6' 
})

.fromTo(sadMouth, 2, {
 scaleX:0,
 scaleY:0.8,
 x:96,
 y:6,
 fill:'#E6E6E6'
},{
 x:0,
 scaleX:1,
 scaleY:0.8,
 fill:'#FDFDFD',
 y:6,
 ease:Expo.easeOut
})
.fromTo(happyEyeL, 2, {
 scaleX:0,
 scaleY:1.2,
 x:95,
 y:4,
 fill:'#E6E6E6'
},{ 
 scale:1,
 x:0,
 y:6,
 fill:'#FDFDFD',
 immediateRender:false,
 ease:Expo.easeOut
},'-=2')

.to(happyEyeR, 2, {
 scale:1,
 x:0,
 y:6,
 fill:'#FDFDFD',
 immediateRender:false,
 ease:Expo.easeOut
},'-=2')

.to(faceGroup, 4, {
 x:-132,
 ease:Expo.easeInOut
},'-=4')
.to(faceBg, 4, {
 fill:'#D80032',
 ease:Expo.easeInOut
},'-=4')
.to(shadow, 4, {
 fill:'#B51136',
 ease:Expo.easeInOut
},'-=4')


faceGroup.onclick = function(){
 if(toggleTl.isActive()){return};
 if(toggleTl.time() > 0){
TweenMax.set(happyEyeGroup, {
 transformOrigin:'50% 50%'
})  
  toggleTl.reverse();
  blink(0.152, 0);
 } else{
TweenMax.set(happyEyeGroup, {
 transformOrigin:'50% 50%'
})  
  toggleTl.play()
  blink(0.12, 0.12);
 }
}

function blink(dur, rep){
 TweenMax.to(happyEyeGroup, dur, {
  scaleY:0.03,
  repeat:1,
  yoyo:true,
  repeatDelay:rep
 })
}
panel.onclick = faceGroup.onclick;
</script>
</body>
</html>