在线观看贝塞尔曲线值：传送门

在线观看动画效果：传送门

代码：

<!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贝塞尔曲线模仿饿了么购物车小球动画的更多相关文章

  1. Android 利用二次贝塞尔曲线模仿购物车加入物品抛物线动画

    Android 利用二次贝塞尔曲线模仿购物车加入物品抛物线动画 0.首先.先给出一张效果gif图. 1.贝塞尔曲线原理及相关公式參考:http://www.jianshu.com/p/c0d7ad79 ...

  2. 实用的 CSS — 贝塞尔曲线(cubic-bezier)

    欢迎移步我的博客阅读:<实用的 CSS - 贝塞尔曲线(cubic-bezier)> 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 anim ...

  3. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画

    1.贝塞尔曲线与CAShapeLayer的关系    1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环.   ...

  5. Vue实现购物车小球动画

    思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...

  6. Vue项目实战之改动饿了吗购物小球动画

    html:没有写v-on: afterEnter函数了,因为执行不到,原因是enter的done: <div class="ball-container"><tr ...

  7. vue.js加入购物车小球动画

    生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...

  8. CSS — 贝塞尔曲线(cubic-bezier)

    cubic-bezier 又称三次贝塞尔,主要是为 animation 生成速度曲线的函数,规定是 cubic-bezier(<x1>, <y1>, <x2>, & ...

  9. Android -- 贝塞尔二阶实现饿了么加入购物车效果

    1,上周我们实现了简单的三阶贝塞尔曲线效果实例,今天是使用二阶贝塞尔曲线加动画实现的加入购物车效果,在码代码过程中出现了些问题,过一下和大家来探讨探讨,先看一下效果图 2,从上面的效果来看我们基本上可 ...

随机推荐

  1. 纯JS实现前端动态分页码

    思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPa ...

  2. 安装 vue-devtools

    1. github下载 vue-devtools: git clone https://github.com/vuejs/vue-devtools 2. node install 安装包 3. vi ...

  3. 随机返回经典语句接口API

    api接口:https://www.liutianyou.com/api/?type=js&charset=utf-8 可以单独将上面链接,在浏览器中查看效果 ​ 这是get请求,参数:typ ...

  4. Django时间时区问题

    在django1.4以后,存在两个概念 naive time 与 active time. 简单点讲,naive time就是不带时区的时间,Active time就是带时区的时间. 举例来说,使用d ...

  5. Centos配置网卡子接口

    1.检查OS是否加载802.1q模块: 方法一: [root@rs2 ~]# modinfo 8021q 方法二: [root@rs2 ~]# modinfo -F filename 8021q 方法 ...

  6. 关于verilog中的signed类型

    在数字电路中,出于应用的需要,我们可以使用无符号数,即包括0及整数的集合:也可以使用有符号数,即包括0和正负数的集合.在更加复杂的系统中,也许这两种类型的数,我们都会用到. 有符号数通常以2的补码形式 ...

  7. lvs健康检查脚本第三版

    如下是学习完马哥视频lvs后改写的健康检查脚本第三版.利用工作之余三四个小时时间才把整个逻辑搞清楚,有时候自己都有点蒙圈,尤其是在写到while循环的时候.总的来说非常感谢马哥的慷慨解囊!脚本原稿及思 ...

  8. python--基本类型之集合

    set(集合): 定义和创建: 定义:集合是一个无序的,不重复的数据集合,它主要作用1:去重,把一个列表变成集合,就自动去重了2:关系测试,测试两组数据之间的交集,差集,并集等关系 集合:把不同的数据 ...

  9. MySQL入门第三天（下）——存储过程与存储引擎

    一.存储过程 1.简介 原始的SQL执行的流程: 通过存储过程,便可以简化以上流程,那么存储过程是什么,如何进行性能提高呢? 是什么? 存储过程是可编程的函数,在数据库中创建并保存,可以由SQL语句和 ...

  10. tcp滑动窗口与拥塞控制

    TCP协议作为一个可靠的面向流的传输协议,其可靠性和流量控制由滑动窗口协议保证,而拥塞控制则由控制窗口结合一系列的控制算法实现.一.滑动窗口协议     所谓滑动窗口协议,自己理解有两点:1. “窗口 ...