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

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

代码：

<!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. TinyMCE插件：Filemanager [4.x-6.x] 文件名统一格式化

    上传图片程序(filemanager/upload.php) 在if (!empty($_FILES) && $upload_files)中上传图片时,在文件正式上传至服务器前,有一次 ...

  2. JS中数组方法的封装之slice

    slice方法的功能 // 1) : 数组的截取 // 2) :slice(m,n): 从数组索引m开始,截取到索引n,但是不包含n;[前包后不包] // slice(m) : 从索引m开始,截取到末 ...

  3. Redis- redis.conf

    ############################################## 基本设置 ######################################## # redis ...

  4. Java 8 中有趣的操作 Stream

    Stream 不是java io中的stream 对象创建 我们没有必要使用一个迭代来创建对象,直接使用流就可以 String[] strs = {"haha","hoh ...

  5. 推荐软件7 taskbar numberer，结果get了WIN相关的快捷键

    作为键盘控,Win+数字直达任务栏上的应用已经让我欣喜.接下来我的问题就是每次要数数字才能确定是哪个数字,期间我尝试过按常用顺序进行排序并尝试记住它们.直到我想也许应该有个软件可以在任务栏图标处贴上一 ...

  6. linux 通过 openconnect 来连接学校内网

    参考 http://xingda1989.iteye.com/blog/1969908 https://blog.csdn.net/edin_blackpoint/article/details/70 ...

  7. C# 面试题 （三）

    1. 抽象类的特性是什么? 抽象类不能被实力化,在抽象类上使用new操作符是错误的. 抽象类允许(但不必要)包含抽象方法和入口. 抽象类不能用scaled修饰符. 2. abstract关键字怎么用? ...

  8. Java设计模式（10）——结构型模式之代理模式（Proxy）

    一.概述 概念 UML简图 实际使用的场景示例 如果那个对象是一个是很大的图片,需要花费很长时间才能显示出来,那么当这个图片包含在文档中时,使用编辑器或浏览器打开这个文档,打开文档必须很迅速,不能等待 ...

  9. 佛山Uber优步司机奖励政策（1月11日~1月17日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. LWM2M简介-学习记录

    1. Lightweight M2M 基础,谁搞出来的 OMA是一家国际组织,因为物联网的兴起, OMA在传统的OMA-DM协议基础之上,提出了LWM2M协议.这个协议基于COAP协议,COAP协议基 ...