最新文章:
- Git中tag和branch的区别
- 埃隆·马斯克的-五步工作法
- 特斯拉引荐码获取及使用
- 深入理解 require.context():简化前端模块导入的利器
- 2023年高考今天开始,一起来看看AI写的高考作文
您的位置:
富录-前端开发|web技术博客
>
HTML&&CSS >
CSS3 transition 实现抛物线动画
CSS3 transition 实现抛物线动画
发布时间:2018年03月01日 评论数:抢沙发阅读数: 8696
<!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) }
本文作者:DGF
文章标题:
CSS3 transition 实现抛物线动画
本文地址: https://www.arbays.com/post-76.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
本文地址: https://www.arbays.com/post-76.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
相关文章