CSS 实现小球的曲线运动

文章目录

  • CSS 实现小球的曲线运动
    • 方法一:使用 animation 动画
      • 关于贝塞尔曲线 (cubic-bezier)
    • 方法二:使用 left + top + 绝对定位

CSS 实现小球的曲线运动

方法一:使用 animation 动画

不同的两个方向的 animation 结合起来,就可以实现曲线运动的功能

向右的 animation + 向上的 animation = 向右向上的曲线运动





    
    
    
    Document
    



    

效果:
CSS 实现小球的曲线运动_第1张图片

关于贝塞尔曲线 (cubic-bezier)

贝塞尔曲线就是速度曲线

用来描述小球运动过程中的速度,比如先快后慢、先慢后快…

使用样式:transition: all 2s cubic-bezier(0.48, -0.53, 0.47, 1.44);

设置了这一属性的变化将会按照这一贝塞尔速度曲线来运动

像这样的都是贝塞尔曲线:

ease-in-out

ease

cubic-bezier(0.48, -0.53, 0.47, 1.44)

...

可以调试出想要的贝塞尔曲线:调制贝塞尔曲线的网址

具体的代码:





    
    
    
    关于贝塞尔曲线
    



    

效果:
在这里插入图片描述

方法二:使用 left + top + 绝对定位

(建议使用动画)





    
    
    
    昼短苦夜长,何不秉烛游
    



    

效果:

CSS 实现小球的曲线运动_第2张图片

你可能感兴趣的:(记开发,css,css3,html5)