uni-app按钮涟漪效果+动态渐变边框 css

在uni-app中实现按钮的涟漪效果和动态渐变边框，可以通过CSS样式来完成。以下是实现这种效果的示例代码：

<template>
  <view class="container">
    <button class="ripple-effect-button">点击我</button>
  </view>
</template>
 
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
 
  .ripple-effect-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    outline: none;
    position: relative;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    overflow: hidden;
    transition: 0.3s;
  }
 
  .ripple-effect-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: 0.3s;
  }
 
  .ripple-effect-button:active:after {
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    opacity: 1;
  }
 
  /* 动态渐变边框 */
  .ripple-effect-button {
    border: 2px solid transparent;
    transition: 0.5s;
  }
 
  .ripple-effect-button:hover {
    border-color: #ffffff;
    border-radius: 50px;
  }
</style>

这段代码中，.ripple-effect-button 类定义了按钮的基本样式，并通过伪元素 ::after 实现了点击时的涟漪效果。当按钮被激活（点击）时，伪元素的大小和透明度会发生变化，从而产生涟漪效果。

同时，CSS 还通过伪类 :hover 实现了按钮在鼠标悬停时的动态渐变边框效果。按钮在悬停时，边框的颜色会从透明过渡到白色，并且按钮的边框圆角也会发生变化，增加了交互的视觉反馈。