最新文章:

您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > CSS3 transition 实现抛物线动画

CSS3 transition 实现抛物线动画

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

    <!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://arbays.com/post-76.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论