如何用css实现抛物线

2021-02-04 17:15

阅读：544

YPE html>

标签：orm form char onclick 动效水平字符串 span 抛物线

参考

这回试试使用CSS实现抛物线运动效果

总结

实现抛物线步骤：

1、抛物线运动元素使用至少内外两层标签，可以外面一层

，里面是图片
2、内外两次标签一个负责水平方向的translate移动，一个负责垂直方向的translate移动，然后使用不同的缓动函数（timing-function）
注意：外层标签控制水平方向的移动，速度为匀速，内层标签控制垂直方向的移动，速度为先慢后快
这其实也不难理解，比方说我们扔铅球，其运动轨迹实际上是水平推力和地球引力共同作用的结果，由于空气阻力可以忽略不计，因此，水平方向我们可以看成是匀速运动，而垂直方向由于重力加速度的存在，因此会越来越快。正好和上面CSS代码的缓动曲线是一致的，因此出现了抛物线运动。
如何获取transform呢？

let transform = $(targetNode).css(‘transform‘)

会返回一个字符串，比如我这里是设置了translateX -200px
获取的字符串中就会包含 
"matrix(1, 0, 0, 1, -200, 0)"
矩阵各个值
matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
代码





Document
-timing-function: linear;
        }
        .box_inner {
            background: red;
            transition-timing-function: cubic-bezier(.55,0,.85,.36);
        }
    
    
        
        



 
如何用css实现抛物线
标签：orm   form   char   onclick   动效   水平   字符串   span   抛物线   
原文地址：https://www.cnblogs.com/kunmomo/p/13138245.html