diff --git a/src/config/i18n.js b/src/config/i18n.js index eecd6e9..9b10514 100644 --- a/src/config/i18n.js +++ b/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`, diff --git a/src/config/rules.js b/src/config/rules.js index 04cdfbd..b164a4d 100644 --- a/src/config/rules.js +++ b/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 = [ diff --git a/src/libs/style.js b/src/libs/style.js index 12f7f65..9c32204 100644 --- a/src/libs/style.js +++ b/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}