css设置元素抛物线,CSS3 transition 实现抛物线动画

您的位置：

富录-前端开发|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)

}



提交评论

名  字：

邮  箱：

网  址：

清空信息

关闭评论