css3-贝塞尔曲线-完成小球的曲线运动

最新推荐文章于 2023-06-12 21:55:31 发布

fuguoda

最新推荐文章于 2023-06-12 21:55:31 发布

阅读量1.3k

点赞数

分类专栏： web前端 css

本文链接：https://blog.csdn.net/qq_40976560/article/details/91352276

版权

本文介绍了如何利用CSS3的贝塞尔曲线实现小球沿曲线平滑运动，通过设置特定的cubic-bezier值来控制弧度和运动轨迹。读者可以通过提供的代码示例和效果展示理解这一技术。

摘要由CSDN通过智能技术生成

完成曲线运动使用贝塞尔曲线，可以去：贝塞尔曲线设置曲线的弧度
复制参数过来替换 cubic-bezier(.15,.76,.25,.86);

代码如下所示：

 <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
    .ball{
      height: 60px;
      width: 60px;
      border-radius: 50%;
      position: absolute;
      bottom: 10px;
      z-index: 10;
      left: 10px;
      background: red;
    }
    
    .run_top_right {
      display: block;
      animation: 
    	run-right-right 3s 0.4s infinite linear,
      	run-right-top 3s 0.4s infinite cubic-bezier(.15,.76,.25,.86);
      animation-fill-mode: forwards;
    }
    @keyframes run-right-top {
      0% {
        bottom: 10px; 
    	
      }
      100% {
        bottom:400px;
      }
    }
    @keyframes run-right-right {
      0% {
         left