抛物线小球（加入购物车）

最新推荐文章于 2024-08-22 14:32:34 发布

.234.

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量70

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_71893746/article/details/130673181

版权

文章展示了如何使用HTML和CSS创建一个小球，并通过JavaScript实现点击按钮后小球移动的动画效果。利用CSS的transition属性和cubic-bezier函数控制动画的缓动效果，使小球向下抛掷并反弹。

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

效果：

创建一个小球

<div id="redball"></div>

小球的样式

 #redball {
    width: 15px;
    height: 15px;
    background: red;
    border-radius: 50%;
    position: fixed;
    transition: left 1s linear, top 1s ease-in;
}

点击加入

// 点击按钮 抛掷小球
  function dianji(evt) {
    setNum(num+1)
    var $ball = document.getElementById('redball');  //获取小球的dom节点
    // 将小球进行归位，移到点击的位置，
    $ball.style.zIndex=1
    $ball.style.top = evt.clientY + 'px';
    $ball.style.left = evt.clientX + 'px';
    $ball.style.transition = 'left 0s, top 0s';  //动画
    // 小球向下进行抛掷， 设置定时器可以重复点击
    setTimeout(() => {
      $ball.style.top = window.innerHeight + 'px';
      $ball.style.bottom = "20px"
      $ball.style.left = '10px';
      //css动画   加上cubic-bezier(.35,.8,1,1) 立方贝塞尔曲线  上面有官网链接
      $ball.style.transition = 'left 1s cubic-bezier(.35,.8,1,1), top 1s ease-in';
    }, 20)
  }

PS:曲线弧度可自定义：cubic-bezier.com