想请问大家这种点击效果要怎么做？

这种点击后会有一个圆圈效果该怎么做还是说有套件
我目前是用react做的

谢谢大家

css 动画写的 上网搜搜 css点击动画 应该有和你这一样的效果

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7482448
• 你也可以参考下这篇文章：React列表页跳转详情页，返回时并记录位置（处理了两个页面共用一个事件，返回时页面重新刷新的问题）
• 除此之外, 这篇博客: 面试 | 必须要会的50个React面试题中的 因文章篇幅过长，题目和答案已整理为PDF文档 ,想要获取可以看我主页，如下图： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 

   

  

   

• 您还可以看一下 吴杏平老师的React 全家桶从入门到实战到源码课程中的 课程内容介绍小节, 巩固相关知识点
  
• 以下回答由chatgpt基于相关博客总结生成:

  针对问题：如何在React中实现一个点击后出现圆圈效果的按钮？如果有现成的套件可以推荐一下吗？

  答：React里面一般实现点击出现圆圈效果的按钮可以通过CSS的伪元素实现，不用借助插件或者库，当然也可以使用react-effects-tooltip这种第三方库进行实现。以下是利用CSS实现的按钮点击出现圆圈效果的代码：

  import React from "react";
  import './Button.css';
  
  const Button = ({text, onClick}) => {
    return (
      <button className="ripple" onClick={onClick}>
        {text}
        <span className="circle"></span>
      </button>
    )
  }
  
  export default Button;
  

  .ripple {
    background-position: center;
    transition: background 0.8s;
  
    &:hover {
      background: #0fb5db radial-gradient(circle, transparent 1%, #0fb5db 1%) center/15000%;
    }
  
    &:active {
      background-color: #ccc;
      background-size: 100%;
      transition: background 0s;
    }
  
    span.circle {
      display: block;
      position: absolute;
      border-radius: 50%;
      background-color: #fff;
      transition: transform 1s, opacity 2s;
      transform: scale(0);
      opacity: 1;
    }
  
    &:active span.circle {
      animation: ripple 1s ease-out forwards;
    }
  }
  
  @keyframes ripple {
    to {
      transform: scale(3);
      opacity: 0;
    }
  }
  

  在上面的代码中，我们给Button按钮添加了一些CSS样式，当鼠标悬停在上面时会出现涟漪效果，而在点击按钮时则会出现圆圈效果，这个圆圈会随着动画渐渐消失。其中circle类是一个绝对定位和左右居中的白色圆圈，通过transition可以制定出现和消失的效果。而使用到了animation属性，圆圈出现后就可以利用animation制定消失的效果。