CSS3 transition 实现抛物线动画

发布时间:2018年03月01日评论数：抢沙发阅读数： 9389

<!DOCTYPE html>
<html>
<head>
<title>CSS3 水平抛物线动画</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<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>
</head>
<body>
    <div id="ball"></div>
</body>

var ball = document.getElementById('ball');
    document.body.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 = '0px';
            ball.style.transition = 'left 1s linear, top 1s ease-in';
        }, 20)
    }