如何用css实现抛物线
参考
总结
实现抛物线步骤：
1、抛物线运动元素使用至少内外两层标签，可以外面一层<div>，里面是<img>图片
2、内外两次标签一个负责水平方向的translate移动，一个负责垂直方向的translate移动，然后使用不同的缓动函数（timing-function）
注意：外层标签控制水平方向的移动，速度为匀速，内层标签控制垂直方向的移动，速度为先慢后快
这其实也不难理解，比方说我们扔铅球，其运动轨迹实际上是水平推力和地球引力共同作用的结果，由于空气阻力可以忽略不计，因此，水平方向我们可以看成是匀速运动，而垂直方向由于重力加速度的存在，因此会越来越快。正好和上面CSS代码的缓动曲线是一致的，因此出现了抛物线运动。
如何获取transform呢？
let transform = $(targetNode).css(‘transform‘)
会返回一个字符串，比如我这里是设置了translateX -200px
<span>获取的字符串中就会包含 </span>
<span><span>"matrix(1, 0, 0, 1, -200, 0)"</span></span>
矩阵各个值
matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style>
.box_outer,.box_inner {
width: 100px;
height: 100px;
transition: transform .5s;
}
.box_outer {
transition-timing-function: linear;
}
.box_inner {
background: red;
transition-timing-function: cubic-bezier(.55,0,.85,.36);
}
</style>
<script>
window.onload = function(){
var boxOuter = document.getElementsByClassName(‘box_outer‘);
var boxInner = document.getElementsByClassName(‘box_inner‘);
document.onclick = function(){
$(‘.box_outer‘).css(‘transform‘,‘matrix(1, 0, 0, 1, 300, 0)‘);
$(‘.box_inner‘).css(‘transform‘,‘matrix(1, 0, 0, 1, 0, 400)‘);
}
}
</script>
</head>
<body>
<div class="box_outer">
<div class="box_inner"></div>
</div>
</body>
</html>