css实现动态水波纹效果

效果如下：

1. 外层容器 (shop_wrap)：

   • 设置外边距 (padding) 提供一些间距和边距

2. 圆形容器 (TheCircle)：

   • 使用相对定位 (position: relative)，宽度和高度均为 180px，形成一个圆形按钮
   • 圆角半径 (border-radius) 设置为 50%，使其呈现圆形
   • 边框 (border) 和阴影 (box-shadow) 提供边框和轻微的立体感
   • 设置溢出隐藏 (overflow: hidden)，确保水波纹效果在容器内显示
   • 鼠标悬停时显示手型光标 (cursor: pointer)

3. 水波纹容器 (Water)：

   • 绝对定位 (position: absolute)，覆盖在圆形容器上
   • 设置宽度和高度为 100%，形成一个完整的圆形水波纹效果
   • 设置背景颜色 (background-color) 为水波纹的颜色
   • 圆角半径 (border-radius) 同样设置为 50%
   • 溢出隐藏 (overflow: hidden)，确保水波纹效果不超出容器

4. 文字居中显示 (CenteredText)：

   • 绝对定位 (position: absolute)，位于水波纹容器中心
   • 使用 transform 属性将文字居中显示

5. 水波纹效果 (Water::after 和 Water::before)：

   • 使用 ::after 和 ::before 伪元素创建水波纹效果
   • 设置宽度和高度为 150%，略大于容器，以确保水波纹效果覆盖整个容器
   • 设置圆角半径，形成圆形效果
   • 设置动画 (animation)，通过关键帧 (@keyframes) 实现水波纹的旋转和缩放效果

源码如下：