zhangwy
/
Gsmarket


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星座配对</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<style>
*{margin: 0; padding: 0;}
.anim-box{ position: relative; width: 80%; height: 500px; margin: 50px auto; background-color: #000; color: #000;}
.anim-box>*{position: absolute;}
.anim-box span{width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 100%; background-color: #fff; color: #000; z-index: 999;}
.anim-box span{-webkit-transition: .8s; transition: .8s;}
.anim-box ul{ bottom: 50px; left: 20px; font-size: 0;}
.anim-box ul li{display: inline-block;  width: 80px; height: 80px; line-height: 80px; margin: 20px 20px 0 0;  text-align: center; border-radius: 100%; background-color: #c00; color: #fff; font-size: 14px;}

@-webkit-keyframes beam{
  0%{
    box-shadow:0 0 0px rgba(255,255,255,0);
    opacity: 0.3;
  }
  50%{
    box-shadow: 0 0 100px rgba(255,255,255, 1);
    opacity: 1;
  }
  100%{
    box-shadow:0 0 0px rgba(255,255,255,0);
    opacity: 0.3;
    background-color: #fff;
  }
}
@keyframes beam{
  0%{
    box-shadow:0 0 0px rgba(255,255,255, 0);
    opacity: 0.3;
  }
  50%{
    box-shadow:0 0 100px rgba(255,255,255, 1);
    opacity: 1;
  }
  100%{
    box-shadow:0 0 0px 0px rgba(255,255,255, 0);
    opacity: 0.3;
    background-color: #fff;
  }
}
.beam{animation: beam 1s infinite ; -webkit-animation: beam 1s infinite ; }
</style>
</head>
<body>

<section class="anim-box">
  <span id="me">你</span>
  <ul class="xingzuo">
    <li>天秤座</li>
    <li>处女座</li>
    <li>水瓶座</li>
    <li>双子座</li>
    <li>双鱼座</li>
    <li>白羊座</li>
  </ul>
</section>


<script>
;!function(){
  
  
  var find = function(index){
    var me = document.getElementById('me');
    var ul = document.querySelectorAll('.xingzuo')[0];
    var xzs = ul.querySelectorAll('li');
    
    var x = xzs[index].offsetLeft + ul.offsetLeft;
    var y = xzs[index].offsetTop + ul.offsetTop;
    
    me.style['-webkit-transform'] = 'translate3d('+ x +'px, '+ y +'px, 0px) scale(0.5)';
    me.style['transform'] = 'translate3d('+ x +'px, '+ y +'px, 0px) scale(0.5)';
    me.style.opacity = 0.5;
    
    setTimeout(function(){
      xzs[index].className = 'beam';
      setTimeout(function(){
        me.removeAttribute('style');
      }, 500);
    }, 800);
  };
  
  
  setTimeout(function(){
    find(Math.random()*5|0) //模拟匹配
  }, 1000);
  
  
}();
</script>
</body>
</html>