饿了么添加菜品小球动画

Html

Css

* {
	margin:0;
	padding:0;
}
button {
	margin:50px;
	margin-left:500px;
	margin-top:200px;
}
#ball {
	display:none;
	position:fixed;
	left:300px;
	top:300px;
	transition:all .5s cubic-bezier(0.49,-0.5,0.75,0.41);
}
#ball #ball-hook {
	width:15px;
	height:15px;
	background:red;
	border-radius:100%;
	transition:all .5s linear;
}

window.onload = function() {
    var btn = document.getElementById('btn');
    var oB = document.getElementById('ball');
    var oBB = document.getElementById('ball-hook');

btn.onclick = function() {
        var e = this.getBoundingClientRect();
        var x = e.left;
        var y = e.top;

var downy = window.innerHeight - y;
        var downx = -(x - 50);

oB.style.top = y - 20 + 'px';
        oB.style.left = x + 'px';

oB.style.display = "block";
        setTimeout(function() {
            oB.style.webkitTransform = 'translate3d(0,' + downy + 'px,0)';
            oB.style.transform = 'translate3d(0,' + downy + 'px,0)';
            oB.style.transition = 'all .5s cubic-bezier(0.49, -0.5, 0.75, 0.41)';

oBB.style.webkitTransform = 'translate3d(' + downx + 'px,0,0)';
            oBB.style.transform = 'translate3d(' + downx + 'px,0,0)';
            oBB.style.transition = 'all .5s linear';
        })
    }

oB.addEventListener('transitionend', function(ev) {
        oB.style.display = "none";
        oB.style.webkitTransform = 'translate3d(0,0,0)';
        oB.style.transform = 'translate3d(0,0,0)';
        oB.style.transition = 'none';

oBB.style.webkitTransform = 'translate3d(0,0,0)';
        oBB.style.transform = 'translate3d(0,0,0)';
        oBB.style.transition = 'none';
    })

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

饿了么添加菜品小球动画



代码描述：饿了么添加菜品小球动画

模仿饿了么添加菜品小球动画，css3

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

司徒

相关代码

饿了么添加菜品小球动画

最新