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

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

代码：

<!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. STL专题·vector容器

    1.构造函数 vector():创建一个空vector vector(int nSize):创建一个vector,元素个数为nSize (vector<int> a(10);) vecto ...

  2. 前端的字符串时间如何自动转换为后端Java的Date属性,介绍springMVC中如何解决时间转换问题

    平常在开发过程中,前端选择时间一般都要使用时间选择插件,但是这种插件选出来的时间都是字符串类型,我们该怎么转换为后端的Date呢?/? 前端效果如下(笔者用的是layDate5.0插件): 修改前的后 ...

  3. Java中枚举的相关应用

    package example6; import org.junit.Test;/*1.什么是枚举? * 需要在颐堤港范围内取值,这个值只能是这个范围内的一个 * 使用枚举关键字enum * 枚举里也 ...

  4. hql返回数值

    public int getCountUser() throws ParseException { Session hSession = sessionFactory.getCurrentSessio ...

  5. angularjs脏机制

    Angular 每一个绑定到UI的数据,就会有一个 $watch 对象. watch = { name:'', //当前的watch 对象 观测的数据名 getNewValue:function($s ...

  6. layui sleect获取value值

    <div class="layui-form-item"> <label for="username" class="layui-f ...

  7. django创建第一个子应用-3

    在Web应用中,通常有一些业务功能模块是在不同的项目中都可以复用的,故在开发中通常将工程项目拆分为不同的子功能模块,各功能模块间可以保持相对的独立,在其他工程项目中需要用到某个特定功能模块时,可以将该 ...

  8. Java学习笔记十九:Java中的访问控制修饰符

    Java中的访问控制修饰符 一:Java修饰符的种类: 访问修饰符 非访问修饰符 修饰符用来定义类.方法或者变量,通常放在语句的最前端.我们通过下面的例子来说明: public class Hello ...

  9. Qt——模态、非模态

    模态: 只能操作对话框非模态:要使用 QDialog *_d = new QDialog();_d->setattribute(Qt::WA_DeleteOnClose);_d->show ...

  10. 20145202马超 2016-2017-2《Java程序设计》课程总结

    学号 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1(http://www.cnblogs.com/tuolemi/p/6193756.html ...