【转载】使用CSS实现抛物线运动效果

注:博客中会不定期转载一些好文章,但不会全文摘抄,只做摘要引流。尊重原创,尊重原作者。

文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/

原文链接:https://www.zhangxinxu.com/wordpress/?p=7934
原文摘要:

纯CSS也是可以实现DOM元素的抛物线运动效果的。

应该是数年前,我看过一篇外文,就是水平和垂直运动使用不同的timing-function可以得到曲线效果

抛物线运动元素使用至少内外两层标签,例如,本demo抛物线运动物体是CSS世界这本书的缩略图,我们可以外面一层<div>,里面是<img>图片:

<div class="fly-item"><img src="./book.jpg"></div>

然后内外两次标签一个负责水平方向的translate移动,一个负责垂直方向的translate移动,然后使用不同的缓动函数,也就是使用不同的timing-function,在CSS3 animation动画效果中是animation-timing-function属性,在CSS3 transition过渡效果中是transition-timing-function属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注