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,从上面的效果来看我们基本上可 ...
随机推荐
- linux系统基础之-----磁盘结构（基于centos7.4 1708）
- 20181.5IDEAx64位授权码
转载于:https://blog.csdn.net/q258523454/article/details/79775092 2DZ8RPRSBU-eyJsaWNlbnNlSWQiOiIyRFo4UlB ...
- 如何给ioloop.run_sync()中调用的函数传入参数
问题 如何给tornado.ioloop.IOLoop中的run_sync方法中调用的函数添加参数 解决方案 使用functools.partial 解决示例 from tornado import ...
- 【Hadoop故障处理】全分布下，DataNode进程正常启动，但是网页上不显示，并且DataNode节点为空
[故障背景] DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空. /etc/hosts 的ip和hostname配置正常,各个机器之间能够ping通. [日志错误信息] ...
- 大数据学习--day06(Eclipse、数组)
Eclipse.数组 Eclipse 的基本设置 调节控制条字体大小. Window -> Preferences -> General -> Appearance -> ...
- 大数据学习--day02(标识符、变量、数据类型、类型转换、进制转换、原码反码补码)
标识符.变量.数据类型.类型转换.进制转换.原码反码补码 标识符: java50个关键字不能做标识符,以数字开头不能做标识符(这个老是忘记写一个类名的时候) 变量: 变量分为成员变量和局部变量,注意作 ...
- gem install ruby-odbc失败
解决: brew install unixodbc gem install ruby-odbc -v '0.99998'
- java四种访问权限
java有四种访问权限,它们各自的范围如下图所示 当下列访问修饰符修饰字段和方法时: private 任意位置的子类不可以访问从父类继承的private字段和方法.这里所说的访问包括通过super关键 ...
- 动态代理以及对应Spring中AOP源码分析
AOP(面向切面编程)在Spring中是被广泛应用的(例如日志,事务,权限等),而它的基本原理便是动态代理. 我们知道动态代理有两种:基于JDK的动态代理以及基于CGlib动态代理.以下是两种动态代理 ...
- java常见类