@ruixinkeji/prism-ui 1.0.16 → 1.0.17

package/dist/styles/effects.scss

@@ -1,407 +0,0 @@
-/**
- * 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%;
-  }
-}