feat: add more styles

src/config/i18n.js

@@ -593,6 +593,21 @@ export const I18N = {
     en: `Blockquote`,
     zh_TW: `引用`,
   },
+  gradient: {
+    zh: `渐变`,
+    en: `Gradient`,
+    zh_TW: `漸變`,
+  },
+  blink: {
+    zh: `闪现`,
+    en: `Blink`,
+    zh_TW: `閃現`,
+  },
+  glow: {
+    zh: `发光`,
+    en: `Glow`,
+    zh_TW: `發光`,
+  },
   diy_style: {
     zh: `自定义样式`,
     en: `Custom Style`,

src/config/rules.js

@@ -19,6 +19,9 @@ export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
 export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮
 export const OPT_STYLE_BLOCKQUOTE = "blockquote"; // 引用
+export const OPT_STYLE_GRADIENT = "gradient"; // 渐变
+export const OPT_STYLE_BLINK = "blink"; // 闪现
+export const OPT_STYLE_GLOW = "glow"; // 发光
 export const OPT_STYLE_DIY = "diy_style"; // 自定义样式
 export const OPT_STYLE_ALL = [
   OPT_STYLE_NONE,
@@ -30,6 +33,9 @@ export const OPT_STYLE_ALL = [
   OPT_STYLE_FUZZY,
   OPT_STYLE_HIGHLIGHT,
   OPT_STYLE_BLOCKQUOTE,
+  OPT_STYLE_GRADIENT,
+  OPT_STYLE_BLINK,
+  OPT_STYLE_GLOW,
   OPT_STYLE_DIY,
 ];
 export const OPT_STYLE_USE_COLOR = [

src/libs/style.js

@@ -1,4 +1,4 @@
-import { css } from "@emotion/css";
+import { css, keyframes } from "@emotion/css";
 import {
   OPT_STYLE_NONE,
   OPT_STYLE_LINE,
@@ -9,11 +9,44 @@ import {
   OPT_STYLE_FUZZY,
   OPT_STYLE_HIGHLIGHT,
   OPT_STYLE_BLOCKQUOTE,
+  OPT_STYLE_GRADIENT,
+  OPT_STYLE_BLINK,
+  OPT_STYLE_GLOW,
   OPT_STYLE_DIY,
   DEFAULT_DIY_STYLE,
   DEFAULT_COLOR,
 } from "../config";
 
+const gradientFlow = keyframes`
+  to {
+    background-position: 200% center;
+  }
+`;
+
+const blink = keyframes`
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+`;
+
+const glow = keyframes`
+  from {
+    text-shadow: 0 0 10px #fff, 
+    0 0 20px #fff, 
+    0 0 30px #0073e6, 
+    0 0 40px #0073e6;
+  }
+  to {
+    text-shadow: 0 0 20px #fff, 
+    0 0 30px #ff4da6, 
+    0 0 40px #ff4da6, 
+    0 0 50px #ff4da6;
+  }
+`
+
 const genLineStyle = (style, color) => `
   opacity: 0.8;
   -webkit-opacity: 0.8;
@@ -49,7 +82,7 @@ const genStyles = ({
   [OPT_STYLE_WAVYLINE]: genLineStyle("wavy", bgColor),
   // 虚线框
   [OPT_STYLE_DASHBOX]: `
-    border: 1px dashed ${bgColor || DEFAULT_COLOR};
+    border: 2px dashed ${bgColor || DEFAULT_COLOR};
     display: inline-block;
     padding: 0.2em 0.4em;
     box-sizing: border-box;
@@ -81,6 +114,29 @@ const genStyles = ({
       -webkit-opacity: 1;
     }
   `,
+  // 渐变
+  [OPT_STYLE_GRADIENT]: `
+    background-image: linear-gradient(
+      90deg,
+      #3b82f6,
+      #9333ea,
+      #ec4899,
+      #3b82f6
+    );
+    background-size: 200% auto;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    animation: ${gradientFlow} 4s linear infinite;
+  `,
+  // 闪现
+  [OPT_STYLE_BLINK]: `
+    animation: ${blink} 1s infinite;
+  `,
+  // 发光
+  [OPT_STYLE_GLOW]: `
+    animation: ${glow} 2s ease-in-out infinite alternate;
+  `,
   // 自定义
   [OPT_STYLE_DIY]: `
 ${textDiyStyle}