CSS小球下落回弹动画效果

易山易酒易诗

已于 2022-05-04 17:05:56 修改

阅读量1k

点赞数 1

分类专栏： CSS 文章标签： css3 javascript 前端

于 2022-05-04 14:40:46 首次发布

本文链接：https://blog.csdn.net/qq_44675204/article/details/124570349

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

视频被横向拉伸了，实际效果小球是圆的！鼠标放在 tube 区域中时小球运动，划出时运动暂停，点击重新开始运动。

屏幕录制2022-05-04 14.22.09

<template>
  <div class="tube">
    <div class="ball"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    document.querySelector('.tube').addEventListener('click', function() {
      let ball =  this.querySelector('.ball');
      ball.className = 'noBall';
      setTimeout(()=>{
        ball.className = 'ball';
      });
    })
  },
  methods: {},
};
</script>

<style>
body {
  background: none;
  font: bold 100% Helvetica, sans-serif;
}

@keyframes bounce {
  50%, 80% {
    transform: translateY(355px);
    animation-timing-function: cubic-bezier(0, .5, .5, 1);
  }
  65% {
    transform: translateY(255px);
  }
  90% {
    transform: translateY(305px);
  }
  to {
    transform: translateY(355px);
  }
}

.tube {
  position: relative;
  left: 10%;
  top: 10%;
  width: 50px;
  height: 400px;
  background: linear-gradient(#08d5f0, white);
  border-bottom: 10px solid #03b135;
}

.ball {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(at 12px 12px, white, red);
  animation: 3s bounce cubic-bezier(.5, 0, 1, .5);
  animation-play-state: paused;
  animation-fill-mode: forwards;
}

.tube:hover .ball {
  animation-play-state: running;
}


</style>