CSS部分：
<style>
* {
padding: 0;
margin: 0;
}
html,body {
width: 100%;
height: 100%;
}
#ball {
display: none;
width:10px;
height:10px;
background: red;
border-radius: 50%;
position: fixed;
}
</style>
HTML部分:
<body>
<div id="ball"></div>
</body>
JavaScript部分：
<script>
var ball = document.getElementById('ball');
document.onclick = function(e) {
ball.style.top = e.pageY + 'px';
ball.style.left = e.pageX + 'px';
ball.style.transition = 'left 0s, top 0s';
ball.style.display = 'block';
setTimeout(function(){
ball.style.top = window.innerHeight + 'px';
ball.style.left = '500px';
ball.style.transition = 'left 1s linear, top 1s cubic-bezier(.08,-0.35,.99,.33)';
}, 20)
}
</script>
|