css貝塞爾曲線模仿餓了麽購物車小球動畫
阿新 • • 發佈：2017-08-01
viewport title output 代碼 put 動畫效果 doc int class
在線觀看貝塞爾曲線值：傳送門
在線觀看動畫效果：傳送門
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html{
width: 100%;
height: 100%;
}
body{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.icon-add{
position: absolute;
right: 20px;
top: 100px;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
border:1px solid #ddd;
border-radius: 50%;
}
.icon2{
top: 200px;
}
.point-outer.point-pre {
display: none;
}
.point-outer {
position: absolute;
z-index: 20;
-webkit-transition: all 0.5s cubic-bezier(0.39,-0.4,0.83,0.23) 0s;
transition: all 0.5s cubic-bezier(0.39,-0.4,0.83,0.23) 0s;
}
.point-inner {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
background-color: #09BE03;
-webkit-transition: all 0.5s linear 0s;
color: #ffffff;
text-align: center;
font-size: 0.7rem;
}
</style>
</head>
<body>
<span class="icon-add icon">+</span>
<span class="icon-add icon2">+</span>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
//小球運動動畫元素
var $pointDiv = $(‘<div id="pointDivs">‘).appendTo(‘body‘);
for(var i = 0; i < 5; i++) {
$(‘<div class="point-outer point-pre"><div class="point-inner"/></div>‘).appendTo($pointDiv);
}
$(‘.icon-add‘).click(function(){
var startOffset = $(this).offset();
var endTop = window.innerHeight - 30,
endLeft = 20,
left = startOffset.left,
top = startOffset.top;
var outer = $(‘#pointDivs .point-pre‘).first().removeClass("point-pre").css({
left: left + ‘px‘,
top: top + ‘px‘
});
var inner = outer.find(".point-inner");
setTimeout(function() {
outer[0].style.webkitTransform = ‘translate3d(0,‘ + (endTop - top) + ‘px,0)‘;
inner[0].style.webkitTransform = ‘translate3d(‘ + (endLeft - left) + ‘px,0,0)‘;
setTimeout(function() {
outer.removeAttr("style").addClass("point-pre");
inner.removeAttr("style");
}, 500);
//這裏的延遲值和小球的運動時間相關
}, 1);
//小球運動坐標
})
})
</script>
</body>
</html>
css貝塞爾曲線模仿餓了麽購物車小球動畫