@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/styles/effects.scss

@@ -0,0 +1,407 @@
+/**
+ * Prism UI - 特效组件样式
+ * 悬浮按钮、霓虹灯效果、动画等
+ */
+
+/* ============================================================
+   悬浮按钮
+   ============================================================ */
+
+.prism-float-btn {
+  width: 100rpx;
+  height: 100rpx;
+  background: $prism-gradient-primary;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: $prism-shadow-primary;
+  transition: all 0.3s ease;
+
+  .fa {
+    font-size: 48rpx;
+    color: #fff;
+  }
+
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 4rpx 12rpx $prism-primary-alpha-40;
+  }
+
+  // 深色模式 - 魅惑质感
+  .dark-mode & {
+    background: linear-gradient(135deg,
+      $prism-primary-alpha-30 0%,
+      $prism-primary-alpha-25 100%);
+    border: 2rpx solid rgba(0, 212, 255, 0.5);
+    backdrop-filter: blur(20rpx);
+    box-shadow:
+      0 8rpx 32rpx rgba(52, 120, 246, 0.5),
+      0 4rpx 16rpx rgba(52, 120, 246, 0.4),
+      0 2rpx 8rpx rgba(0, 0, 0, 0.3),
+      inset 0 2rpx 0 rgba(255, 255, 255, 0.2),
+      inset 0 -2rpx 0 rgba(0, 0, 0, 0.3);
+    animation: prism-float-breathe 3s ease-in-out infinite;
+
+    // 顶部高光弧线
+    &::before {
+      content: '';
+      position: absolute;
+      top: 8rpx;
+      left: 20%;
+      right: 20%;
+      height: 2rpx;
+      background: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.5),
+        transparent);
+      border-radius: 50%;
+    }
+
+    // 外围霓虹渐变光晕
+    &::after {
+      content: '';
+      position: absolute;
+      top: -15rpx;
+      left: -15rpx;
+      right: -15rpx;
+      bottom: -15rpx;
+      border-radius: 50%;
+      background: conic-gradient(
+        from 0deg,
+        rgba(255, 0, 128, 0.6) 0deg,
+        rgba(255, 107, 181, 0.5) 60deg,
+        rgba(121, 40, 202, 0.6) 120deg,
+        rgba(0, 112, 243, 0.6) 180deg,
+        rgba(0, 212, 255, 0.7) 240deg,
+        rgba(0, 245, 255, 0.6) 300deg,
+        rgba(255, 0, 128, 0.6) 360deg
+      );
+      filter: blur(15rpx);
+      animation: prism-halo-rotate 4s linear infinite;
+      z-index: -1;
+      opacity: 0.9;
+    }
+
+    .fa {
+      color: #00F5FF;
+      filter: drop-shadow(0 0 12rpx rgba(0, 245, 255, 1))
+              drop-shadow(0 0 20rpx rgba(0, 212, 255, 0.8));
+      animation: prism-icon-glow 2s ease-in-out infinite;
+    }
+
+    &:active {
+      background: linear-gradient(135deg,
+        $prism-primary-alpha-40 0%,
+        $prism-primary-alpha-35 100%);
+      transform: scale(0.95);
+      box-shadow:
+        0 4rpx 16rpx rgba(52, 120, 246, 0.6),
+        0 2rpx 8rpx rgba(52, 120, 246, 0.5),
+        inset 0 2rpx 0 rgba(255, 255, 255, 0.15),
+        inset 0 -2rpx 0 rgba(0, 0, 0, 0.4);
+      animation: none;
+
+      &::after {
+        animation: none;
+      }
+    }
+  }
+}
+
+/* ============================================================
+   动画关键帧
+   ============================================================ */
+
+// 呼吸动画
+@keyframes prism-float-breathe {
+  0%, 100% {
+    box-shadow:
+      0 8rpx 32rpx rgba(52, 120, 246, 0.5),
+      0 4rpx 16rpx rgba(52, 120, 246, 0.4),
+      0 2rpx 8rpx rgba(0, 0, 0, 0.3),
+      inset 0 2rpx 0 rgba(255, 255, 255, 0.2),
+      inset 0 -2rpx 0 rgba(0, 0, 0, 0.3);
+    border-color: rgba(0, 212, 255, 0.5);
+  }
+  50% {
+    box-shadow:
+      0 12rpx 48rpx rgba(52, 120, 246, 0.7),
+      0 6rpx 24rpx rgba(52, 120, 246, 0.5),
+      0 3rpx 12rpx rgba(0, 212, 255, 0.4),
+      inset 0 2rpx 0 rgba(255, 255, 255, 0.25),
+      inset 0 -2rpx 0 rgba(0, 0, 0, 0.3);
+    border-color: rgba(0, 245, 255, 0.8);
+  }
+}
+
+// 霓虹光晕旋转
+@keyframes prism-halo-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// 图标发光
+@keyframes prism-icon-glow {
+  0%, 100% {
+    filter: drop-shadow(0 0 12rpx rgba(0, 245, 255, 1))
+            drop-shadow(0 0 20rpx rgba(0, 212, 255, 0.8));
+    color: #00F5FF;
+  }
+  50% {
+    filter: drop-shadow(0 0 20rpx rgba(0, 245, 255, 1))
+            drop-shadow(0 0 30rpx rgba(0, 212, 255, 1))
+            drop-shadow(0 0 40rpx rgba(52, 120, 246, 0.6));
+    color: #00FFFF;
+  }
+}
+
+// 淡入动画
+@keyframes prism-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// 缩放动画
+@keyframes prism-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// 滑入动画
+@keyframes prism-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* ============================================================
+   VitePress 风格渐变文字效果
+   ============================================================ */
+
+@keyframes gradient-flow {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.prism-neon-text {
+  font-weight: 700;
+  letter-spacing: 2rpx;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% auto;
+  animation: gradient-flow 3s ease infinite;
+
+  &--blue {
+    background-image: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+  }
+
+  &--pink {
+    background-image: linear-gradient(120deg, #ff6b6b 30%, #feca57, #ff9ff3);
+  }
+
+  &--green {
+    background-image: linear-gradient(120deg, #00b894 30%, #00cec9, #81ecec);
+  }
+}
+
+/* ============================================================
+   渐变边框效果
+   ============================================================ */
+
+.prism-gradient-border {
+  position: relative;
+  border-radius: 16rpx;
+  padding: 4rpx; /* 边框宽度 */
+  background: linear-gradient(135deg, #3478F6, #722ED1, #F53F3F, #FF7D00);
+
+  /* 内容区域 */
+  > view {
+    background: var(--prism-bg-color-card, #fff);
+    border-radius: 12rpx;
+    position: relative;
+    z-index: 1;
+  }
+
+  .dark-mode & {
+    > view {
+      background: var(--prism-bg-color-card, #1D2129);
+    }
+  }
+}
+
+/* ============================================================
+   RGB霓虹流动进度条（深色模式专用）
+   ============================================================ */
+
+/* 浅色模式 - 普通蓝色渐变 */
+.prism-neon-progress-fill {
+  background: linear-gradient(90deg, #3478F6 0%, #5da3f5 100%);
+  border-radius: 4rpx;
+}
+
+/* 深色模式 - RGB霓虹流动效果 */
+.dark-mode {
+  .prism-neon-progress-fill {
+    background: linear-gradient(90deg,
+      #FF0080 0%,
+      #FF0080 10%,
+      #7928CA 30%,
+      #0070F3 50%,
+      #00DFD8 70%,
+      #7928CA 90%,
+      #FF0080 100%);
+    background-size: 200% 100%;
+    animation: prism-rgb-flow 3s linear infinite;
+    box-shadow:
+      0 0 10rpx rgba(255, 0, 128, 0.5),
+      0 0 20rpx rgba(121, 40, 202, 0.3);
+  }
+}
+
+/* RGB霓虹流动动画 */
+@keyframes prism-rgb-flow {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+/* ============================================================
+   脉冲效果
+   ============================================================ */
+
+.pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
+
+/* ============================================================
+   骨架屏
+   ============================================================ */
+
+.prism-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--prism-bg-color, #F7F8FA) 25%,
+    #E5E6EB 50%,
+    var(--prism-bg-color, #F7F8FA) 75%
+  );
+  background-size: 200% 100%;
+  animation: prism-skeleton-loading 1.5s infinite;
+  border-radius: 8rpx;
+
+  &--circle {
+    border-radius: 50%;
+  }
+
+  &--text {
+    height: 28rpx;
+    margin-bottom: 16rpx;
+  }
+
+  &--title {
+    height: 40rpx;
+    width: 60%;
+    margin-bottom: 24rpx;
+  }
+
+  &--avatar {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+  }
+
+  &--button {
+    height: 72rpx;
+    border-radius: 12rpx;
+  }
+
+  .dark-mode & {
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.05) 25%,
+      rgba(255, 255, 255, 0.1) 50%,
+      rgba(255, 255, 255, 0.05) 75%
+    );
+    background-size: 200% 100%;
+  }
+}
+
+@keyframes prism-skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ============================================================
+   气泡装饰效果
+   ============================================================ */
+.prism-bubble {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50rpx;
+    right: -50rpx;
+    width: 160rpx;
+    height: 160rpx;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -30rpx;
+    left: -30rpx;
+    width: 120rpx;
+    height: 120rpx;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 50%;
+  }
+}