mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.8 KiB
104 lines
2.8 KiB
|
|
<!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> |