<div class="ball"></div>
<button class="addCart">加入购物车</button>
<div class="item"></div>
<div class="count">0</div>
@imgUrl: 'https://xiaotianxia.github.io/blog/vuepress/assets/img/sample.b8fbed10.jpg';
html,
body {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.ball {
  	width: 40px;
  	height: 40px;
	margin-left: 10px;
  	background-color: red;
	background-image: url(@imgUrl);
	background-size: cover;
	z-index: 99;
	
  	offset-distance: 0%;
	offset-rotate: 0deg;
}

.addCart {
	position: absolute;
	bottom: 0;
	right: 0;
	display: inline-block;
	border: none;
	outline: none;
	color: #fff;
	background-color: #FFC107;
	font-size: 14px;
	padding: 1em 2em;
	cursor: pointer;
}

.item {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 50px;
	display: inline-block;
	border: none;
	outline: none;
	color: #fff;
	background-color: #000;
	font-size: 14px;
	background-image: url(@imgUrl);
	background-size: cover;
	z-index: 98;
}

.count {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0, -50%);
	width: 30px;
	height: 20px;
	background-color: #212121;
	color: #fff;
	padding: .5em 1em;
	text-align: center;
}

@keyframes move-ball {
  	to {
    	offset-distance: 100%;
  	}
}
let num = 0,
	addCartBtn = document.querySelector('.addCart'),
	ball = document.querySelector('.ball'),
	count = document.querySelector('.count'),
	wWidth = 0,
	wHeight = 0,
	pathStr= '';

function init () {
	wWidth = document.documentElement.offsetWidth;
	wHeight = document.documentElement.offsetHeight;
	pathStr = 'M0 ' + Math.floor(wHeight) + ' Q' + Math.floor(wWidth / 2) + ' 0 ' + Math.floor(wWidth) + ' ' + Math.floor(wHeight / 2);
	ball.style.offsetPath = 'path("' + pathStr + '")';
}

function run () {
	ball.style.animation = 'move-ball 1s cubic-bezier(.88,.05,.55,.5)';
	ball.style.borderRadius = '50%';
}


addCartBtn.addEventListener('click', e => {
	run();
});

ball.addEventListener('animationend', e => {
	ball.style.animation = 'none';
	ball.style.borderRadius = '0';
	count.innerHTML = ++ num;
});

window.onload = function () {
	init();
}

let timer = null;
window.onresize = function () {
	timer && clearTimeout(timer);
	timer = setTimeout(function () {
		init();
	}, 100);
}

	
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.