css贝塞尔曲线模仿饿了么购物车小球动画
在线观看贝塞尔曲线值：传送门
在线观看动画效果：传送门
代码：
<!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贝塞尔曲线模仿饿了么购物车小球动画的更多相关文章
- Android 利用二次贝塞尔曲线模仿购物车加入物品抛物线动画
Android 利用二次贝塞尔曲线模仿购物车加入物品抛物线动画 0.首先.先给出一张效果gif图. 1.贝塞尔曲线原理及相关公式參考:http://www.jianshu.com/p/c0d7ad79 ...
- 实用的 CSS — 贝塞尔曲线(cubic-bezier)
欢迎移步我的博客阅读:<实用的 CSS - 贝塞尔曲线(cubic-bezier)> 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 anim ...
- 使用vue模拟购物车小球动画
使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画
1.贝塞尔曲线与CAShapeLayer的关系 1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环. ...
- Vue实现购物车小球动画
思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...
- Vue项目实战之改动饿了吗购物小球动画
html:没有写v-on: afterEnter函数了,因为执行不到,原因是enter的done: <div class="ball-container"><tr ...
- vue.js加入购物车小球动画
生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...
- CSS — 贝塞尔曲线(cubic-bezier)
cubic-bezier 又称三次贝塞尔,主要是为 animation 生成速度曲线的函数,规定是 cubic-bezier(<x1>, <y1>, <x2>, & ...
- Android -- 贝塞尔二阶实现饿了么加入购物车效果
1,上周我们实现了简单的三阶贝塞尔曲线效果实例,今天是使用二阶贝塞尔曲线加动画实现的加入购物车效果,在码代码过程中出现了些问题,过一下和大家来探讨探讨,先看一下效果图 2,从上面的效果来看我们基本上可 ...
随机推荐
- 『ACM C++』 Codeforces | 1003C - Intense Heat
今日兴趣新闻: NASA 研制最强推进器,加速度可达每秒 40 公里,飞火星全靠它 链接:https://mbd.baidu.com/newspage/data/landingsuper?contex ...
- 设计四个线程,其中两个线程每次对j增加1,另外两个线程对j每次减1,写出程序
/* * 设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1.写出程序. */ public class ThreadTest { private int j; public sta ...
- Django中间件执行顺序
中间件 Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django ...
- js函数和window对象
- UIDynamic-吸附-重力-碰撞-物理仿真动画
现实生活中: 运动场==物理仿真器 跑步==物理仿真行为 人==仿真元素 创建步骤: 1.创建物理仿真器,并且指定仿真范围 2.创建物理仿真行为,并且指定仿真元素 3.将物理仿真行为添加到仿真器中 D ...
- 将图片绘制到画布上：imagecopy()
<?php //1. 绘制图像资源(创建一个画布) $image = imagecreatetruecolor(500, 300); //2. 先分配一个绿色 $green = imagecol ...
- 网站用户行为分析——Linux的安装
Linux的选择 在Linux系统各个发行版中,CentOS系统和Ubuntu系统在服务端和桌面端使用占比最高,网络上资料最是齐全,所以建议使用CentOS系统或Ubuntu. 一般来说,如果要做服务 ...
- python教程（一）·python环境搭建
python的环境搭建总的来说分为两大步:下载.安装(废话@_@).在这里以windows为例(Linux通常内置了python,就算没有内置,相信Linux用户也非常清楚软件的安装方法) 第一步-下 ...
- 为什么我要放弃javaScript数据结构与算法（第十一章）—— 算法模式
本章将会学习递归.动态规划和贪心算法. 第十一章 算法模式 递归 递归是一种解决问题的方法,它解决问题的各个小部分,直到解决最初的大问题.递归通常涉及函数调用自身. 递归函数是像下面能够直接调用自身的 ...
- 怎么判断ThreadPool线程池里的任务都执行完毕
在下面 链接中做方便的应该是第三种方法(他也推荐了),但是第三种方法有个小问题,就是 : WaitHandle.WaitAll(_ManualEvents); 中的_ManualEvents最大为64 ...