<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.m-fly-wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
}
.m-box {
position: absolute;
left: calc(50% + 200px);
}
.m-box.run {
animation: box-move 1s cubic-bezier(0, 0, 1, 1);
animation-fill-mode: forwards;
}
.m-inner {
position: absolute;
display: none;
80px;
height: 80px;
border-radius: 50%;
background: #f66f0c;
background-size: 100% 100%;
transform: translateX(-50%);
}
.m-inner.run {
display: inline-block;
animation: inner-move 1s;
animation-timing-function: cubic-bezier(.05, .51, .31, .82);
animation-fill-mode: forwards;
}
@keyframes box-move {
0% {
top: 0%;
}
100% {
top: 90%;
}
}
@keyframes inner-move {
0% {
left: 0;
}
100% {
left: -200px;
}
}
</style>
</head>
<body>
<div class="m-fly-wrap">
<button id="m-btn1">肉夹馍</button>
<button id="m-btn2">酸辣粉</button>
<div id="m-box" class="m-box">
<div id="m-inner" class="m-inner"></div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
var dom = {
btn1: $('#m-btn1'),
btn2: $('#m-btn2'),
box: $('#m-box'),
inner: $('#m-inner')
}
function fly(img) {
dom.box.addClass('run')
dom.inner.addClass('run')
dom.inner.css({ backgroundImage: 'url(' + img + ')' })
setTimeout(function () {
dom.box.removeClass('run')
dom.inner.removeClass('run')
}, 1500)
}
dom.btn1.on('click', function () {
fly('http://p1.meituan.net/xianfu/3a01d174dd0f8e09035ebd12c1b9e912266444.png')
})
dom.btn2.on('click', function () {
fly('http://p0.meituan.net/xianfu/5c98777fff2718063d07eb427e886e5a224202.png')
})
})
</script>
</body>
</html>