您的位置:
富录-前端开发|web技术博客
>
HTML&&CSS >
CSS3 transition 实现抛物线动画
CSS3 transition 实现抛物线动画
发布时间:2018年03月01日评论数:抢沙发阅读数:
4959
CSS3 水平抛物线动画* {
padding: 0;
margin: 0;
}
html,body {
width: 100%;
height: 100%;
}
#ball {
display: none;
width:10px;
height:10px;
background: red;
border-radius: 50%;
position: fixed;
}
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)
}
提交评论
名 字:
邮 箱:
网 址:
清空信息
关闭评论