m

code/base-project/base-vue/src/App.vue

@@ -11,28 +11,28 @@ export default {
             return
 
           const rect = el.getBoundingClientRect()
-          const size = Math.max(rect.width, rect.height) * 2
-          const flash = document.createElement('span')
+          const size = Math.max(rect.width, rect.height)
+          const ripple = document.createElement('span')
 
-          flash.style.position = 'absolute'
-          flash.style.width = flash.style.height = `${size}px`
-          flash.style.left = `${(rect.width - size) / 2}px`
-          flash.style.top = `${(rect.height - size) / 2}px`
-          flash.style.background = 'rgba(255,255,255,0.2)'
-          flash.style.borderRadius = '50%'
-          flash.style.pointerEvents = 'none'
-          flash.style.transform = 'scale(0)'
-          flash.style.opacity = '0.4'
-          flash.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out'
+          ripple.style.position = 'absolute'
+          ripple.style.width = ripple.style.height = `${size}px`
+          ripple.style.left = `${e.offsetX - size / 2}px`
+          ripple.style.top = `${e.offsetY - size / 2}px`
+          ripple.style.background = 'rgba(255,255,255,0.4)' // 柔和水波纹
+          ripple.style.borderRadius = '50%'
+          ripple.style.pointerEvents = 'none'
+          ripple.style.transform = 'scale(0)'
+          ripple.style.opacity = '0.6'
+          ripple.style.transition = 'transform 0.4s, opacity 0.6s'
 
-          el.appendChild(flash)
+          el.appendChild(ripple)
 
-          requestAnimationFrame(() => {
-            flash.style.transform = 'scale(1)'
-            flash.style.opacity = '0'
-          })
+          setTimeout(() => {
+            ripple.style.transform = 'scale(2)'
+            ripple.style.opacity = '0'
+          }, 10)
 
-          flash.addEventListener('transitionend', () => flash.remove())
+          setTimeout(() => ripple.remove(), 600)
         })
       },
     },
@@ -42,7 +42,7 @@ export default {
 
 <template>
   <div class="button-demo">
-    <h3>现代后台按钮 - 瞬态扩散 + 内凹反馈</h3>
+    <h3>现代后台按钮 - 内凹 + 柔和水波纹</h3>
     <button v-flash class="btn btn-primary">
       主按钮
     </button>
@@ -70,7 +70,6 @@ export default {
   background: #f0f2f5;
 }
 
-/* 基础按钮 */
 .btn {
   position: relative;
   display: inline-flex;
@@ -86,59 +85,55 @@ export default {
   user-select: none;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 3px rgba(0, 100, 250, 0.15);
-  }
-
-  &:hover:not(:disabled) {
-    filter: brightness(1.08);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  }
-
-  &:active:not(:disabled) {
-    filter: brightness(0.95);
-    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
-  }
 }
 
-/* 主按钮 */
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn:focus-visible {
+  box-shadow: 0 0 0 3px rgba(0, 100, 250, 0.15);
+}
+
+.btn:hover:not(:disabled) {
+  filter: brightness(1.05);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.btn:active:not(:disabled) {
+  filter: brightness(0.95);
+  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
 .btn-primary {
   background: linear-gradient(180deg, #0072ff, #0053d6);
   color: #fff;
 }
 
-/* 次按钮 */
 .btn-secondary {
   background: #fff;
   border: 1px solid #d9d9d9;
   color: #0064fa;
 }
 
-/* 危险按钮 */
 .btn-danger {
   background: linear-gradient(180deg, #ef4444, #b91c1c);
   color: #fff;
 }
 
-/* 链接按钮 */
 .btn-link {
   background: transparent;
   color: #0064fa;
   padding: 8px 16px;
+}
 
-  &:hover:not(:disabled) {
-    text-decoration: underline;
-    background: rgba(0, 100, 250, 0.05);
-  }
+.btn-link:hover:not(:disabled) {
+  text-decoration: underline;
+  background: rgba(0, 100, 250, 0.05);
+}
 
-  &:active:not(:disabled) {
-    background: rgba(0, 100, 250, 0.1);
-  }
+.btn-link:active:not(:disabled) {
+  background: rgba(0, 100, 250, 0.1);
 }
 </style>