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

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

代码：

<!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. ABAP术语-Technical Object

    Technical Object 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/18/1111205.html Generic term f ...

  2. memcache和redis的区别和联系

    一.区别 Memcache : 1,对每个key的数据最大是1M. 2,对各种技术支持比较全面,session可以存储memcache中,各种框架(例如thinkphp)对memcache支持比较好. ...

  3. SQL注入的浅尝辄止

    简单的说,SQL注入就是通过在前端页面输入SQL语句,导致系统暴露异常信息在前端页面显示,非法者通过这些异常信息获取数据库的相干信息,为攻击系统做准备.

  4. Kafka 推荐网站

    Kafka系列文章 [Kafka设计解析(一)- Kafka背景及架构介绍](http://www.jasongj.com/2015/03/10/KafkaColumn1/) [Kafka设计解析(二 ...

  5. 万恶的a标签

    相信很多人碰见过这些问题吧  给某个a标签套的元素中添加点击事件 在外面就能获取到但是点击事件不生效把  或者在页面中点击一个a标签元素发现页面返回了最顶端 然后就开始郁闷了 哈哈 其实这些看似神奇的 ...

  6. PHP批量清理MIP-cache缓存(内附在线mipcache清理工具)

    MIP是什么?我就不多说了把. MIPCache 又是什么? 科普一下:MIPCache 是一套基于代理的 CDN 缓存系统.可用于缓存所有被某度相关页面引用或者从百度相关服务点出的 MIP 页面.当 ...

  7. Oracle之单表查询及常用函数

    1.语法: select 字段列表 from 表名 [where 查询条件] [group by 分组] [having 分组条件] [order by 排序] select * 代表查询所有的字段 ...

  8. JAVA基础 - 类的构造与实例化

    一个简单的demo,主要运用: 抽象类,类的继承 类的实例化,构造函数 @Override重写父类方法 package week4; abstract class Person { void show ...

  9. c语言程序设计：用strcpy比较数组（银行卡密码程序设计），strcpy（复制数组内容）和getchar（）（敲键盘字符，统计不想要的字符的个数）

    统计从键盘输入一行字符的个数: 1 //用了getchar() 语句 2 //这里的\n表示回车 #include <stdio.h> #include <stdlib.h> ...

  10. 嘿，C语言（持续更新中...）

    ---恢复内容开始--- 上次简单介绍了一下C语言,这次说说数据与计算程序,那么话不多说,进来看看. 第二章      数据与简单的计算程序 一:数据 既然说到了数据,那么说说什么是写数据呢? 表面意 ...