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,从上面的效果来看我们基本上可 ...
随机推荐
- 竞赛题解 - Karp-de-Chant Number(BZOJ-4922)
Karp-de-Chant Number(BZOJ-4922) - 竞赛题解 进行了一次DP的练习,选几道题写一下博客~ 标签:BZOJ / 01背包 / 贪心 『题目』 >> There ...
- Linux每日一命令：【00】总纲
Linux每日一命令更新频率为每周5篇. 文章结构如下: 简介 语法 选项 参数 常用实例 实用技巧(可选) 参考文档 文章目录如下: 2018-02-19 20:15 -- Linux每日一命令:[ ...
- vue 图片压缩 基于cli3 配置
chainWebpack: config => { const imagesRule = config.module.rule('images') imagesRule .use('image- ...
- 用Head方法获得百度搜索结果的真实地址
用Head方法获得百度搜索结果的真实地址 在百度中搜索"Java",第一条结果的链接为: https://www.baidu.com/link?url=HBOOMbhPKH4SfI ...
- ueditor 富文本编辑器 Uncaught TypeError: Cannot set property 'innerHTML' of undefined问题
ueditor.addListener("ready", function () { ueditor.setContent(‘内容'); });
- hadoop的自定义分组实现 （Partition机制）
hadoop开发中我们会遇到类似这样的问题,比如 如何将不同省份的手机号分别输出到不同的文件中,本片文章将对hadoop内置的Partition类进行重写以解决这个问题. MapReduce的使用者通 ...
- 【AD】自己画板的备忘
快捷键: [Ctrl + M ]计算出两点之间的距离,画电路板时会用到 [Ctrl + Q ]在设定X.Y..等等的地方,快捷键可以公英制快速切换 [shift + 空格键 ]在布线的同时,此快捷键可 ...
- Python3 urllib 与 Python2 urllib的变化
Infi-chu: http://www.cnblogs.com/Infi-chu/ Py2.x: Urllib库 Urllin2库 Py3.x: Urllib库 变化: 在Pytho2.x中使用im ...
- 钓鱼 洛谷p1717
题目描述 话说发源于小朋友精心设计的游戏被电脑组的童鞋们藐杀之后非常不爽,为了表示安慰和鼓励,VIP999决定请他吃一次“年年大丰收”,为了表示诚意,他还决定亲自去钓鱼,但是,因为还要准备2013NO ...
- 数据库 MySQL part3
外键约束 如果表A的主关键字是表B中的字段,则该字段称为表B的外键,表A称为主表,表B称为从表. 外键是用来实现参照完整性的,不同的外键约束方式将可以使两张表紧密的结合起来,特别是修改或者删除的级联操 ...