波纹动画css+js

最新推荐文章于 2025-06-06 01:31:59 发布

原创最新推荐文章于 2025-06-06 01:31:59 发布

· 124 阅读

0 ·

版权

文章标签：

#前端

本文介绍如何利用CSS和JavaScript创建一种视觉效果——波纹动画，常见于按钮点击反馈。通过CSS定义动画和过渡效果，结合JavaScript实现动态交互，让元素在被点击时产生向外扩散的波纹效果，提升用户界面的互动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
export default {
  data() {
    return {
      isLoaded: false,
      waves: []  // 存储波纹元素
    };
  },
  mounted() {
    this.$nextTick(() => {
      // const button = this.$el.querySelector('.ripple-button');
      // this.startRipple({ target: button });
      this.startRipple();
      setTimeout(() => {
        this.startRipples();
      }, 200);
      setTimeout(() => {
        this.startRipples();
      }, 300);
      // setTimeout(() => {
      // this.startRipples();
      // }, 400);
      // setTimeout(() => {
      // this.startRipples();
      // }, 500);
      // setTimeout(() => {
      // this.startRipples();
      // }, 600);
      // setTimeout(() => {
      // this.startRipples();
      // }, 700);
    });
  },
  methods: {
    closePage() {
      // 关闭当前页面
      this.$router.go(-1);
    },
    startRipple() {
      const button = this.$el.querySelector('.ripple-button');
      const rect = button.getBoundingClientRect();
      const x = rect.width / 2;
      const y = rect.height / 2;

      // 添加波纹元素至数组
      this.waves.push({ x, y });
    },
    startRipples() {
      const button = this.$el.querySelector('.ripple-button');
      const rect = button.getBoundingClientRect();
      const x = rect.width / 2;
      const y = rect.height / 2;

      // 添加波纹元素至数组
      this.waves.push({ x, y });
    },
  }
}
</script>

<style>
.ripple-button {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  overflow: hidden;
}

.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #0087fe;
  pointer-events: none;
  animation: rippleEffect 2s infinite;
  /* 应用动画效果，持续时间为2秒，无限循环 */
  transform-origin: center center;
  /* 设置变换的原点为盒子的中心 */
}

.switc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #0087fe;
  pointer-events: none;
  animation: rippleEffect 2s infinite;
  /* 应用动画效果，持续时间为2秒，无限循环 */
  transform-origin: center center;
}
@keyframes rippleEffect {
  0% {
    opacity: 0.6;
    width: 0%;
    height: 0%;
  }

  50% {
    opacity: 0.3;
    width: 100%;
    height: 100%;
  }

  100% {
    opacity: 0;
    width: 300%;
    height: 300%;
  }
}
</style>