🎨 Share Your CSS snippet / 分享你的 CSS 样式 (RCH) #1
dlsdgj
started this conversation in
Show and tell
Replies: 5 comments
-
PixPin_2026-06-09_06-45-23.mp4基于 MoreHighlightStyle.css 修改(@稻米鼠) CSS CODECSS CODE.hl-green { margin: 0 -0.2em; padding: 0.1em 0.2em; border-radius: 0.8em 0.3em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 1deg, rgba(188, 233, 64, .1), rgba(188, 233, 64, 1) 4%, rgba(188, 233, 64, .3) 8%, rgba(188, 233, 64, .1) 50%, rgba(188, 233, 64, .5) 90%, rgba(188, 233, 64, .7) 100%, transparent 100% ), linear-gradient( 90deg, transparent 96%, rgba(188, 233, 64, 1) 98%, rgba(188, 233, 64, 0.8) 100% ); }
.hl-blue { margin: 0 -0.2em; padding: 0.1em 0.2em; border-radius: 0.8em 0.3em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 1deg, rgba(88, 188, 255, .1), rgba(88, 188, 255, 1) 4%, rgba(88, 188, 255, .3) 8%, rgba(88, 188, 255, .1) 50%, rgba(88, 188, 255, .5) 90%, rgba(88, 188, 255, .7) 100%, transparent 100% ), linear-gradient( 90deg, transparent 96%, rgba(88, 188, 255, 1) 98%, rgba(88, 188, 255, 0.8) 100% ); }
.hl-pink { margin: 0 -0.2em; padding: 0.1em 0.2em; border-radius: 0.8em 0.3em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 1deg, rgba(255, 160, 188, .1), rgba(255, 160, 188, 1) 4%, rgba(255, 160, 188, .3) 8%, rgba(255, 160, 188, .1) 50%, rgba(255, 160, 188, .5) 90%, rgba(255, 160, 188, .7) 100%, transparent 100% ), linear-gradient( 90deg, transparent 96%, rgba(255, 160, 188, 1) 98%, rgba(255, 160, 188, 0.8) 100% ); }
.hl-orange { margin: 0 -0.2em; padding: 0.1em 0.2em; border-radius: 0.8em 0.3em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 1deg, rgba(255, 188, 64, .1), rgba(255, 188, 64, 1) 4%, rgba(255, 188, 64, .3) 8%, rgba(255, 188, 64, .1) 50%, rgba(255, 188, 64, .5) 90%, rgba(255, 188, 64, .7) 100%, transparent 100% ), linear-gradient( 90deg, transparent 96%, rgba(255, 188, 64, 1) 98%, rgba(255, 188, 64, 0.8) 100% ); }
.hl-red { margin: 0 -0.2em; padding: 0.1em 0.2em; border-radius: 0.8em 0.3em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 1deg, rgba(255, 96, 108, .1), rgba(255, 96, 108, 1) 4%, rgba(255, 96, 108, .3) 8%, rgba(255, 96, 108, .1) 50%, rgba(255, 96, 108, .5) 90%, rgba(255, 96, 108, .7) 100%, transparent 100% ), linear-gradient( 90deg, transparent 96%, rgba(255, 96, 108, 1) 98%, rgba(255, 96, 108, 0.8) 100% ); }
.hl-purple { margin: 0 -0.2em; padding: 0.1em 0.2em; border-radius: 0.8em 0.3em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 1deg, rgba(188, 127, 255, .1), rgba(188, 127, 255, 1) 4%, rgba(188, 127, 255, .3) 8%, rgba(188, 127, 255, .1) 50%, rgba(188, 127, 255, .5) 90%, rgba(188, 127, 255, .7) 100%, transparent 100% ), linear-gradient( 90deg, transparent 96%, rgba(188, 127, 255, 1) 98%, rgba(188, 127, 255, 0.8) 100% ); }
.hl-gray { margin: 0 -0.2em; padding: 0.1em 0.2em; border-radius: 0.8em 0.3em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 1deg, rgba(200, 200, 210, .1), rgba(200, 200, 210, 1) 4%, rgba(200, 200, 210, .3) 8%, rgba(200, 200, 210, .1) 50%, rgba(200, 200, 210, .5) 90%, rgba(200, 200, 210, .7) 100%, transparent 100% ), linear-gradient( 90deg, transparent 96%, rgba(200, 200, 210, 1) 98%, rgba(200, 200, 210, 0.8) 100% ); }
.hl-half-yellow { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: radial-gradient(farthest-side,rgba(255, 233, 88, .8) 98%,#0000) bottom left, linear-gradient(rgb(255, 233, 88) 0 0) bottom, radial-gradient(farthest-side,rgba(255, 233, 88, .8) 98%,#0000) bottom right; background-size:8px 8px,calc(100% - 8px) 8px; background-repeat:no-repeat; }
.hl-half-green { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: radial-gradient(farthest-side,rgba(188, 233, 64, .8) 98%,#0000) bottom left, linear-gradient(rgb(188, 233, 64) 0 0) bottom, radial-gradient(farthest-side,rgba(188, 233, 64, .8) 98%,#0000) bottom right; background-size:8px 8px,calc(100% - 8px) 8px; background-repeat:no-repeat; }
.hl-half-blue { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: radial-gradient(farthest-side,rgba(88, 188, 255, .8) 98%,#0000) bottom left, linear-gradient(rgb(88, 188, 255) 0 0) bottom, radial-gradient(farthest-side,rgba(88, 188, 255, .8) 98%,#0000) bottom right; background-size:8px 8px,calc(100% - 8px) 8px; background-repeat:no-repeat; }
.hl-half-pink { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: radial-gradient(farthest-side,rgba(255, 160, 188, .8) 98%,#0000) bottom left, linear-gradient(rgb(255, 160, 188) 0 0) bottom, radial-gradient(farthest-side,rgba(255, 160, 188, .8) 98%,#0000) bottom right; background-size:8px 8px,calc(100% - 8px) 8px; background-repeat:no-repeat; }
.hl-half-orange { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: radial-gradient(farthest-side,rgba(255, 188, 64, .8) 98%,#0000) bottom left, linear-gradient(rgb(255, 188, 64) 0 0) bottom, radial-gradient(farthest-side,rgba(255, 188, 64, .8) 98%,#0000) bottom right; background-size:8px 8px,calc(100% - 8px) 8px; background-repeat:no-repeat; }
.hl-half-red { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: radial-gradient(farthest-side,rgba(255, 96, 108, .8) 98%,#0000) bottom left, linear-gradient(rgb(255, 96, 108) 0 0) bottom, radial-gradient(farthest-side,rgba(255, 96, 108, .8) 98%,#0000) bottom right; background-size:8px 8px,calc(100% - 8px) 8px; background-repeat:no-repeat; }
.hl-half-purple { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: radial-gradient(farthest-side,rgba(188, 127, 255, .8) 98%,#0000) bottom left, linear-gradient(rgb(188, 127, 255) 0 0) bottom, radial-gradient(farthest-side,rgba(188, 127, 255, .8) 98%,#0000) bottom right; background-size:8px 8px,calc(100% - 8px) 8px; background-repeat:no-repeat; }
.hl-half-gray { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: radial-gradient(farthest-side,rgba(200, 200, 210, .8) 98%,#0000) bottom left, linear-gradient(rgb(200, 200, 210) 0 0) bottom, radial-gradient(farthest-side,rgba(200, 200, 210, .8) 98%,#0000) bottom right; background-size:8px 8px,calc(100% - 8px) 8px; background-repeat:no-repeat; }
.hl-underline-yellow { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline wavy rgb(255, 233, 88) 2px; }
.hl-underline-green { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline wavy rgb(188, 233, 64) 2px; }
.hl-underline-blue { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline wavy rgb(88, 188, 255) 2px; }
.hl-underline-pink { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline wavy rgb(255, 160, 188) 2px; }
.hl-underline-orange { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline wavy rgb(255, 188, 64) 2px; }
.hl-underline-red { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline wavy rgb(255, 96, 108) 2px; }
.hl-underline-purple { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline wavy rgb(188, 127, 255) 2px; }
.hl-underline-gray { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline wavy rgb(200, 200, 210) 2px; }
.hl-rainbow-yellow { margin: 0 -0.2em; padding: 0 0.2em; color: #0f0f0f; background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; background: linear-gradient(90deg, rgb(255, 233, 88), rgb(255, 233, 88)), linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 233, 88), rgb(188, 127, 255)); background-size: 100% 3px, 0 3px; background-repeat: no-repeat; background-position: 100% 100%, 0 100%; transition: 0.5s all; cursor: pointer; }
.hl-rainbow-yellow:hover { color: rgb(15, 15, 15); background-size: 0 3px, 100% 3px; }
.hl-rainbow-green { margin: 0 -0.2em; padding: 0 0.2em; color: #0f0f0f; background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; background: linear-gradient(90deg, rgb(188, 233, 64), rgb(188, 233, 64)), linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 233, 88), rgb(188, 127, 255)); background-size: 100% 3px, 0 3px; background-repeat: no-repeat; background-position: 100% 100%, 0 100%; transition: 0.5s all; cursor: pointer; }
.hl-rainbow-green:hover { color: rgb(15, 15, 15); background-size: 0 3px, 100% 3px; }
.hl-rainbow-blue { margin: 0 -0.2em; padding: 0 0.2em; color: #0f0f0f; background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; background: linear-gradient(90deg, rgb(88, 188, 255), rgb(88, 188, 255)), linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 233, 88), rgb(188, 127, 255)); background-size: 100% 3px, 0 3px; background-repeat: no-repeat; background-position: 100% 100%, 0 100%; transition: 0.5s all; cursor: pointer; }
.hl-rainbow-blue:hover { color: rgb(15, 15, 15); background-size: 0 3px, 100% 3px; }
.hl-rainbow-pink { margin: 0 -0.2em; padding: 0 0.2em; color: #0f0f0f; background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; background: linear-gradient(90deg, rgb(255, 160, 188), rgb(255, 160, 188)), linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 233, 88), rgb(188, 127, 255)); background-size: 100% 3px, 0 3px; background-repeat: no-repeat; background-position: 100% 100%, 0 100%; transition: 0.5s all; cursor: pointer; }
.hl-rainbow-pink:hover { color: rgb(15, 15, 15); background-size: 0 3px, 100% 3px; }
.hl-rainbow-orange { margin: 0 -0.2em; padding: 0 0.2em; color: #0f0f0f; background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; background: linear-gradient(90deg, rgb(255, 188, 64), rgb(255, 188, 64)), linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 233, 88), rgb(188, 127, 255)); background-size: 100% 3px, 0 3px; background-repeat: no-repeat; background-position: 100% 100%, 0 100%; transition: 0.5s all; cursor: pointer; }
.hl-rainbow-orange:hover { color: rgb(15, 15, 15); background-size: 0 3px, 100% 3px; }
.hl-rainbow-red { margin: 0 -0.2em; padding: 0 0.2em; color: #0f0f0f; background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; background: linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 96, 108)), linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 233, 88), rgb(188, 127, 255)); background-size: 100% 3px, 0 3px; background-repeat: no-repeat; background-position: 100% 100%, 0 100%; transition: 0.5s all; cursor: pointer; }
.hl-rainbow-red:hover { color: rgb(15, 15, 15); background-size: 0 3px, 100% 3px; }
.hl-rainbow-purple { margin: 0 -0.2em; padding: 0 0.2em; color: #0f0f0f; background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; background: linear-gradient(90deg, rgb(188, 127, 255), rgb(188, 127, 255)), linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 233, 88), rgb(188, 127, 255)); background-size: 100% 3px, 0 3px; background-repeat: no-repeat; background-position: 100% 100%, 0 100%; transition: 0.5s all; cursor: pointer; }
.hl-rainbow-purple:hover { color: rgb(15, 15, 15); background-size: 0 3px, 100% 3px; }
.hl-rainbow-gray { margin: 0 -0.2em; padding: 0 0.2em; color: #0f0f0f; background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; background: linear-gradient(90deg, rgb(200, 200, 210), rgb(200, 200, 210)), linear-gradient(90deg, rgb(255, 96, 108), rgb(255, 233, 88), rgb(188, 127, 255)); background-size: 100% 3px, 0 3px; background-repeat: no-repeat; background-position: 100% 100%, 0 100%; transition: 0.5s all; cursor: pointer; }
.hl-rainbow-gray:hover { color: rgb(15, 15, 15); background-size: 0 3px, 100% 3px; }
.hl-mask-yellow { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline solid rgb(255, 233, 88) 3px; filter: blur(5px); transition: 0.2s all; cursor: pointer; }
.hl-mask-yellow:hover { filter: blur(0px); }
.hl-mask-green { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline solid rgb(188, 233, 64) 3px; filter: blur(5px); transition: 0.2s all; cursor: pointer; }
.hl-mask-green:hover { filter: blur(0px); }
.hl-mask-blue { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline solid rgb(88, 188, 255) 3px; filter: blur(5px); transition: 0.2s all; cursor: pointer; }
.hl-mask-blue:hover { filter: blur(0px); }
.hl-mask-pink { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline solid rgb(255, 160, 188) 3px; filter: blur(5px); transition: 0.2s all; cursor: pointer; }
.hl-mask-pink:hover { filter: blur(0px); }
.hl-mask-orange { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline solid rgb(255, 188, 64) 3px; filter: blur(5px); transition: 0.2s all; cursor: pointer; }
.hl-mask-orange:hover { filter: blur(0px); }
.hl-mask-red { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline solid rgb(255, 96, 108) 3px; filter: blur(5px); transition: 0.2s all; cursor: pointer; }
.hl-mask-red:hover { filter: blur(0px); }
.hl-mask-purple { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline solid rgb(188, 127, 255) 3px; filter: blur(5px); transition: 0.2s all; cursor: pointer; }
.hl-mask-purple:hover { filter: blur(0px); }
.hl-mask-gray { margin: 0 -0.2em; padding: 0 0.2em; color: rgb(15, 15, 15); background: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: underline solid rgb(200, 200, 210) 3px; filter: blur(5px); transition: 0.2s all; cursor: pointer; }
.hl-mask-gray:hover { filter: blur(0px); } |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
High-contrast color blocking（高对比色块） CSS CODE.highlight-bg-1 { background: linear-gradient(90deg, #ffeb3b 50%, #1a237e 50%); color: #ffffff; padding: 2px 4px; border-radius: 3px; }
.highlight-bg-2 { background: linear-gradient(90deg, #ff1744 50%, #ffffff 50%); color: #1a237e; padding: 2px 4px; border-radius: 3px; }
.highlight-bg-3 { background: linear-gradient(90deg, #00e676 50%, #4a148c 50%); color: #ffffff; padding: 2px 4px; border-radius: 3px; }
.highlight-bg-4 { background: linear-gradient(90deg, #2979ff 50%, #ffab00 50%); color: #ffffff; padding: 2px 4px; border-radius: 3px; }
.hl-tb-1 { background: linear-gradient(to bottom, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%); color: #fff; padding: 2px 6px; border-radius: 3px; }
.hl-tb-2 { background: linear-gradient(to bottom, #ff8c00 0%, #ff8c00 50%, #8a2be2 50%, #8a2be2 100%); color: #fff; padding: 2px 6px; border-radius: 3px; }
.hl-tb-3 { background: linear-gradient(to bottom, #32cd32 0%, #32cd32 50%, #ffd700 50%, #ffd700 100%); color: #333; padding: 2px 6px; border-radius: 3px; }
.hl-tb-4 { background: linear-gradient(to bottom, #00ced1 0%, #00ced1 50%, #ff69b4 50%, #ff69b4 100%); color: #fff; padding: 2px 6px; border-radius: 3px; }
.hl-tb-5 { background: linear-gradient(to bottom, #20b2aa 0%, #20b2aa 50%, #ff4500 50%, #ff4500 100%); color: #fff; padding: 2px 6px; border-radius: 3px; }
.rege1x-highlight { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-weight: bold; padding: 2px 8px; border-radius: 4px; display: inline-block; background: linear-gradient(to bottom, #FF3B30 0%, #FF3B30 33%, #FF9500 33%, #FF9500 66%, #FFCC00 66%, #FFCC00 100%); color: #000; }
.rege1x-highlight { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-weight: bold; padding: 2px 8px; border-radius: 4px; display: inline-block; background: linear-gradient(to bottom, #FF3B30 0%, #FF3B30 33%, #FF9500 33%, #FF9500 66%, #FFCC00 66%, #FFCC00 100%); color: #000; }
.regex-highlight-2 { background: linear-gradient(to bottom, #34C759 0%, #34C759 33%, #FFCC00 33%, #FFCC00 66%, #FF9500 66%, #FF9500 100%); color: #000; }
.regex-highlight-2 { background: linear-gradient(to bottom, #34C759 0%, #34C759 33%, #FFCC00 33%, #FFCC00 66%, #FF9500 66%, #FF9500 100%); color: #000; }
.regex-highlight-3 { background: linear-gradient(to bottom, #00C7BE 0%, #00C7BE 33%, #FF2D55 33%, #FF2D55 66%, #FFCC00 66%, #FFCC00 100%); color: #000; }
.regex-highlight-4 { background: linear-gradient(to bottom, #AF52DE 0%, #AF52DE 33%, #007AFF 33%, #007AFF 66%, #34C759 66%, #34C759 100%); color: #fff; }
.regex-highlight-5 { background: linear-gradient(to bottom, #FF9500 0%, #FF9500 33%, #FF3B30 33%, #FF3B30 66%, #AF52DE 66%, #AF52DE 100%); color: #fff; }
.regex-highlight-1 { background: linear-gradient(to bottom, #007AFF 0%, #007AFF 33%, #AF52DE 33%, #AF52DE 66%, #FF2D55 66%, #FF2D55 100%); color: #fff; }
.regex-highlight-2 { background: linear-gradient(to bottom, #34C759 0%, #34C759 33%, #FFCC00 33%, #FFCC00 66%, #FF9500 66%, #FF9500 100%); color: #000; }
.regex-highlight-3 { background: linear-gradient(to bottom, #00C7BE 0%, #00C7BE 33%, #FF2D55 33%, #FF2D55 66%, #FFCC00 66%, #FFCC00 100%); color: #000; }
.regex-highlight-4 { background: linear-gradient(to bottom, #AF52DE 0%, #AF52DE 33%, #007AFF 33%, #007AFF 66%, #34C759 66%, #34C759 100%); color: #fff; }
.regex-highlight-6 { background: linear-gradient(to bottom, #FF9500 0%, #FF9500 33%, #FF3B30 33%, #FF3B30 66%, #AF52DE 66%, #AF52DE 100%); color: #fff; } |
Beta Was this translation helpful? Give feedback.
0 replies
-
PixPin_2026-06-09_06-41-32.mp4CSS CODE.frontal-lobe { background: #e8f4ff; color: #0a3d6e; padding: 1px 6px 1px 4px; border-radius: 3px 12px 12px 3px; border-left: 3px solid #1a6fbf; position: relative; display: inline-block; font-weight: 500; animation: frontal-pulse 3.5s ease-in-out infinite; }
.frontal-lobe::before { content: ''; position: absolute; bottom: -3px; left: 3px; right: 0; height: 2px; background: linear-gradient(90deg, #1a6fbf 0%, #5ba3e8 60%, transparent 100%); border-radius: 1px; animation: frontal-wave 2.8s ease-in-out infinite; transform-origin: left; }
.frontal-lobe::after { content: '◈'; position: absolute; top: -7px; left: 2px; font-size: 7px; color: #1a6fbf; animation: frontal-blink 3.5s ease-in-out infinite; opacity: 0.7; }
.temporal-lobe { background: #fff8e8; color: #6b3c00; padding: 1px 5px; border-radius: 0 8px 8px 0; border-bottom: 2px solid #d4860a; position: relative; display: inline-block; animation: temporal-warm 4s ease-in-out infinite; }
.temporal-lobe::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: #d4860a; border-radius: 2px 0 0 2px; animation: temporal-vibrate 0.8s ease-in-out infinite; }
.temporal-lobe::after { content: ')))'; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #d4860a; letter-spacing: -3px; animation: temporal-ripple 1.6s ease-out infinite; opacity: 0; }
.parietal-lobe { background: #edf8f0; color: #1a4d2e; padding: 1px 6px; border-radius: 10px 10px 3px 3px; border-top: 2px solid #2d8a50; position: relative; display: inline-block; animation: parietal-sense 3s ease-in-out infinite; }
.parietal-lobe::before { content: '· · ·'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 7px; color: #2d8a50; letter-spacing: 2px; animation: parietal-dots 2s ease-in-out infinite; }
.parietal-lobe::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, #2d8a50 50%, transparent); animation: parietal-scan 2.5s linear infinite; }
.occipital-lobe { background: #f2eeff; color: #3d1a7a; padding: 1px 8px; border-radius: 50% / 40%; border: 1.5px solid #7c4fc4; border-left-color: #b07dff; border-right-color: #b07dff; position: relative; display: inline-block; animation: occipital-glow 2.5s ease-in-out infinite; }
.occipital-lobe::before { content: ''; position: absolute; inset: -4px; border-radius: 50% / 40%; border: 1px solid #9f6be0; opacity: 0; animation: occipital-halo 2.5s ease-in-out infinite; }
.occipital-lobe::after { content: '◉'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 8px; color: #7c4fc4; animation: occipital-iris 4s linear infinite; }
.cerebellum { background: #fff0ec; color: #6b1f0a; padding: 1px 5px; border-radius: 4px; border: 1.5px dashed #e05a30; position: relative; display: inline-block; animation: cerebellum-rhythm 2s ease-in-out infinite; }
.cerebellum::before { content: '⚙'; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #e05a30; animation: cerebellum-spin 3s linear infinite; }
.cerebellum::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, #e05a30 0px, #e05a30 3px, transparent 3px, transparent 6px); transform: translateY(-50%); opacity: 0.3; animation: cerebellum-fold 1.5s ease-in-out infinite; }
.hippocampus { background: #e6f8f8; color: #0a4040; padding: 1px 6px; border-radius: 0px 12px 12px 12px; border-left: 2px solid #0d8a8a; border-bottom: 2px solid #0d8a8a; position: relative; display: inline-block; animation: hippo-memory 4s ease-in-out infinite; }
.hippocampus::before { content: ''; position: absolute; bottom: -6px; left: -2px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #0d8a8a; opacity: 0; animation: hippo-ripple 2s ease-out infinite; }
.hippocampus::after { content: ''; position: absolute; bottom: -10px; left: -6px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #0d8a8a; opacity: 0; animation: hippo-ripple 2s ease-out 0.4s infinite; }
.amygdala { background: #fff0f0; color: #6b0000; padding: 1px 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 1.5px solid #cc2020; position: relative; display: inline-block; animation: amygdala-beat 0.9s ease-in-out infinite; }
.amygdala::before { content: ''; position: absolute; inset: -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 1px solid #cc2020; opacity: 0; animation: amygdala-pulse 0.9s ease-out infinite; }
.amygdala::after { content: '!'; position: absolute; top: -9px; right: 2px; font-size: 8px; font-weight: 700; color: #cc2020; animation: amygdala-alert 0.9s ease-in-out infinite; }
.brainstem { background: #f5f5f3; color: #2c2c2a; padding: 1px 4px; border-radius: 2px; border-left: 3px solid #888780; border-right: 3px solid #888780; position: relative; display: inline-block; font-weight: 400; animation: brainstem-breathe 4s ease-in-out infinite; }
.brainstem::before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; width: 3px; background: linear-gradient(180deg, #b4b2a9, #888780, #5f5e5a); border-radius: 2px 0 0 2px; animation: brainstem-flow 4s ease-in-out infinite; }
.brainstem::after { content: ''; position: absolute; top: 0; bottom: 0; right: -3px; width: 3px; background: linear-gradient(180deg, #b4b2a9, #888780, #5f5e5a); border-radius: 0 2px 2px 0; animation: brainstem-flow 4s ease-in-out 0.5s infinite; }
.thalamus { background: #fffbf0; color: #4a2800; padding: 1px 6px; border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%; border: 1.5px solid #c48a00; position: relative; display: inline-block; animation: thalamus-relay 1.8s ease-in-out infinite; }
.thalamus::before { content: '→'; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #c48a00; animation: thalamus-signal-in 1.8s ease-in-out infinite; }
.thalamus::after { content: '→'; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #c48a00; animation: thalamus-signal-out 1.8s ease-in-out 0.9s infinite; }
.prefrontal-cortex { background: #eef6ff; color: #082d5c; padding: 2px 8px; border-radius: 4px; border-top: 2px solid #2563b0; border-bottom: 1px solid #80b0e8; position: relative; display: inline-block; font-weight: 500; letter-spacing: 0.03em; animation: pfc-think 5s ease-in-out infinite; }
.prefrontal-cortex::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 2px; background: repeating-linear-gradient( 90deg, #2563b0 0px, #2563b0 4px, transparent 4px, transparent 8px, #80b0e8 8px, #80b0e8 10px, transparent 10px, transparent 16px ); animation: pfc-wave 3s linear infinite; }
.prefrontal-cortex::after { content: '⊕'; position: absolute; top: -11px; right: 4px; font-size: 7px; color: #2563b0; animation: pfc-scan 5s ease-in-out infinite; }
.basal-ganglia { background: #f8f0ff; color: #3a0060; padding: 1px 10px 1px 6px; border-radius: 16px; border: 1.5px solid #9140c0; position: relative; display: inline-block; animation: basal-loop 3s ease-in-out infinite; }
.basal-ganglia::before { content: '↻'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #9140c0; animation: basal-rotate 2s linear infinite; }
.basal-ganglia::after { content: ''; position: absolute; inset: 3px; border-radius: 12px; border: 1px dashed #c490e8; animation: basal-inner 3s ease-in-out infinite; pointer-events: none; }
.corpus-callosum { background: linear-gradient(90deg, #e8f0ff 0%, #f5f5ff 50%, #fff0f8 100%); color: #2a1a4a; padding: 1px 6px; border-radius: 8px; border-top: 2px solid; border-image: linear-gradient(90deg, #3a6fd8, #9966cc, #cc4488) 1; position: relative; display: inline-block; animation: corpus-bridge 4s ease-in-out infinite; }
.corpus-callosum::before { content: '⟵'; position: absolute; top: 50%; left: -18px; transform: translateY(-50%); font-size: 10px; color: #3a6fd8; animation: corpus-left 2s ease-in-out infinite; }
.corpus-callosum::after { content: '⟶'; position: absolute; top: 50%; right: -18px; transform: translateY(-50%); font-size: 10px; color: #cc4488; animation: corpus-right 2s ease-in-out 1s infinite; }
@keyframes corpus-bridge { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } }
@keyframes corpus-left { 0%, 100% { opacity: 0.3; transform: translateY(-50%) translateX(2px); } 50% { opacity: 1; transform: translateY(-50%) translateX(-2px); } }
@keyframes corpus-right { 0%, 100% { opacity: 0.3; transform: translateY(-50%) translateX(-2px); } 50% { opacity: 1; transform: translateY(-50%) translateX(2px); } }
@keyframes basal-loop { 0%, 100% { background: #f8f0ff; } 50% { background: #f0e4ff; } }
@keyframes basal-rotate { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }
@keyframes basal-inner { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes pfc-think { 0%, 100% { background: #eef6ff; letter-spacing: 0.03em; } 50% { background: #e0efff; letter-spacing: 0.04em; } }
@keyframes pfc-wave { 0% { background-position: 0 0; } 100% { background-position: 32px 0; } }
@keyframes pfc-scan { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; transform: rotate(180deg); } }
@keyframes thalamus-relay { 0%, 100% { background: #fffbf0; } 50% { background: #fff5d6; } }
@keyframes thalamus-signal-in { 0%, 100% { opacity: 0.2; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(3px); } }
@keyframes thalamus-signal-out { 0%, 100% { opacity: 0.2; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(3px); } }
@keyframes brainstem-breathe { 0%, 100% { padding-top: 1px; padding-bottom: 1px; opacity: 0.9; } 50% { padding-top: 2px; padding-bottom: 2px; opacity: 1; } }
@keyframes brainstem-flow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes amygdala-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.06); } 30% { transform: scale(0.98); } 45% { transform: scale(1.04); } 60% { transform: scale(1); } }
@keyframes amygdala-pulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes amygdala-alert { 0%, 100% { opacity: 0.5; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes hippo-memory { 0%, 100% { background: #e6f8f8; } 50% { background: #d0f2f2; } }
@keyframes hippo-ripple { 0% { opacity: 0.6; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2); } }
@keyframes cerebellum-rhythm { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-1px); } 75% { transform: translateY(1px); } }
@keyframes cerebellum-spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }
@keyframes cerebellum-fold { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }
@keyframes occipital-glow { 0%, 100% { background: #f2eeff; border-color: #7c4fc4; } 50% { background: #ece5ff; border-color: #9f6be0; } }
@keyframes occipital-halo { 0% { opacity: 0; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes occipital-iris { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }
@keyframes parietal-sense { 0%, 100% { box-shadow: 0 2px 8px rgba(45,138,80,0.08); } 50% { box-shadow: 0 2px 12px rgba(45,138,80,0.2); } }
@keyframes parietal-dots { 0%, 100% { opacity: 0.4; letter-spacing: 2px; } 50% { opacity: 1; letter-spacing: 4px; } }
@keyframes parietal-scan { 0% { transform: translateX(-50px); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(50px); opacity: 0; } }
@keyframes temporal-warm { 0%, 100% { background: #fff8e8; } 50% { background: #fff0d0; } }
@keyframes temporal-vibrate { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.85); } }
@keyframes temporal-ripple { 0% { opacity: 0.8; right: -14px; } 100% { opacity: 0; right: -26px; } }
@keyframes frontal-pulse { 0%, 100% { background: #e8f4ff; } 50% { background: #d4ecff; } }
@keyframes frontal-wave { 0%, 100% { transform: scaleX(1); opacity: 0.8; } 50% { transform: scaleX(0.6); opacity: 0.4; } }
@keyframes frontal-blink { 0%, 80%, 100% { opacity: 0.7; } 40% { opacity: 1; } } |
Beta Was this translation helpful? Give feedback.
0 replies
-
css code.stripe-rose { background: transparent; color: #5a1a1a; padding: 0.1em 0.3em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( -45deg, rgba(230,100,100,0.12) 0px, rgba(230,100,100,0.12) 2px, transparent 2px, transparent 7px ), linear-gradient(transparent 60%, rgba(220,80,80,0.18) 60%); }
.stripe-sage { background: transparent; color: #1a3d2a; padding: 0.1em 0.3em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(60,160,100,0.1) 0px, rgba(60,160,100,0.1) 3px, transparent 3px, transparent 10px ), linear-gradient(transparent 55%, rgba(60,160,100,0.2) 55%); }
.stripe-sky { background: transparent; color: #0d2d4a; padding: 0.1em 0.3em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(60,130,210,0.08) 0px, rgba(60,130,210,0.08) 2px, transparent 2px, transparent 6px ), linear-gradient(180deg, rgba(60,130,210,0.05) 0%, rgba(60,130,210,0.22) 100%); }
.stripe-amber { background: transparent; color: #4a2800; padding: 0.1em 0.3em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 45deg, rgba(210,150,20,0.1) 0px, rgba(210,150,20,0.1) 2px, transparent 2px, transparent 8px ), linear-gradient(transparent 50%, rgba(220,160,20,0.25) 50%); }
.stripe-lavender { background: transparent; color: #2d1a4a; padding: 0.1em 0.3em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( -30deg, rgba(140,90,210,0.08) 0px, rgba(140,90,210,0.08) 2px, transparent 2px, transparent 9px ), linear-gradient(transparent 58%, rgba(140,90,210,0.2) 58%); } |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Nations Collection CSS CODEcss code.country-germany { background: transparent; color: #1a0a00; padding: 0.05em 0.4em; border-radius: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(20,20,20,0.2) 0%, rgba(20,20,20,0.2) 33%, rgba(200,30,30,0.18) 33%, rgba(200,30,30,0.18) 66%, rgba(220,180,0,0.22) 66%, rgba(220,180,0,0.22) 100% ); border-top: 1.5px solid rgba(20,20,20,0.4); border-bottom: 1.5px solid rgba(220,180,0,0.6); }
.country-germany::after { content: '⚙'; font-size: 0.65em; margin-left: 3px; color: rgba(180,140,0,0.8); display: inline-block; animation: de-gear 4s linear infinite; }
.country-france { background: transparent; color: #0a0a2a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(0,50,160,0.18) 0%, rgba(0,50,160,0.18) 33%, rgba(240,240,240,0.08) 33%, rgba(240,240,240,0.08) 66%, rgba(200,20,30,0.18) 66%, rgba(200,20,30,0.18) 100% ); border-bottom: 1.5px solid rgba(200,20,30,0.4); }
.country-france::before { content: '⚜'; font-size: 0.7em; margin-right: 2px; color: rgba(0,50,160,0.7); display: inline-block; animation: fr-fleur 4s ease-in-out infinite; }
.country-italy { background: transparent; color: #1a0a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(0,140,70,0.2) 0%, rgba(0,140,70,0.2) 33%, rgba(240,240,240,0.06) 33%, rgba(240,240,240,0.06) 66%, rgba(200,30,30,0.2) 66%, rgba(200,30,30,0.2) 100% ); border-left: 2px solid rgba(0,140,70,0.6); border-right: 2px solid rgba(200,30,30,0.6); }
.country-italy::after { content: '🏛'; font-size: 0.65em; margin-left: 3px; display: inline-block; animation: it-col 5s ease-in-out infinite; }
.country-spain { background: transparent; color: #2a0a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(196,20,30,0.2) 0%, rgba(196,20,30,0.2) 25%, rgba(240,180,0,0.22) 25%, rgba(240,180,0,0.22) 75%, rgba(196,20,30,0.2) 75%, rgba(196,20,30,0.2) 100% ); border-top: 1.5px solid rgba(196,20,30,0.5); border-bottom: 1.5px solid rgba(196,20,30,0.5); }
.country-spain::before { content: '♞'; font-size: 0.7em; margin-right: 2px; color: rgba(196,20,30,0.7); display: inline-block; animation: es-knight 3s ease-in-out infinite; }
.country-united-kingdom { background: transparent; color: #0a0a2a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( -45deg, rgba(200,20,30,0.12) 0px, rgba(200,20,30,0.12) 3px, transparent 3px, transparent 10px ), repeating-linear-gradient( 45deg, rgba(0,36,125,0.1) 0px, rgba(0,36,125,0.1) 3px, transparent 3px, transparent 10px ), linear-gradient(transparent 54%, rgba(0,36,125,0.18) 54%); border-bottom: 1.5px solid rgba(200,20,30,0.5); border-top: 1.5px solid rgba(0,36,125,0.4); }
.country-united-kingdom::after { content: '♚'; font-size: 0.65em; margin-left: 3px; color: rgba(0,36,125,0.7); display: inline-block; animation: uk-crown 5s ease-in-out infinite; }
.country-russia { background: transparent; color: #0a0a1a; padding: 0.05em 0.4em; border-radius: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(220,220,230,0.2) 0%, rgba(220,220,230,0.2) 33%, rgba(0,57,166,0.18) 33%, rgba(0,57,166,0.18) 66%, rgba(210,16,52,0.18) 66%, rgba(210,16,52,0.18) 100% ); border-top: 1.5px solid rgba(220,220,230,0.5); border-bottom: 1.5px solid rgba(210,16,52,0.5); }
.country-russia::before { content: '⚔'; font-size: 0.65em; margin-right: 3px; color: rgba(210,16,52,0.7); display: inline-block; animation: ru-eagle 6s ease-in-out infinite; }
.country-sweden { background: transparent; color: #0a1a2a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, transparent 0%, transparent 28%, rgba(254,204,0,0.35) 28%, rgba(254,204,0,0.35) 38%, transparent 38%, transparent 100% ), linear-gradient( 180deg, rgba(0,106,167,0.15) 0%, rgba(0,106,167,0.15) 42%, rgba(254,204,0,0.3) 42%, rgba(254,204,0,0.3) 58%, rgba(0,106,167,0.15) 58%, rgba(0,106,167,0.15) 100% ); border-left: 2px solid rgba(0,106,167,0.5); }
.country-sweden::after { content: '❄'; font-size: 0.65em; margin-left: 3px; color: rgba(0,106,167,0.8); display: inline-block; animation: se-snow 3s ease-in-out infinite; }
.country-norway { background: transparent; color: #1a0a0a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, transparent 0%, transparent 25%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0.25) 30%, rgba(0,40,104,0.25) 30%, rgba(0,40,104,0.25) 36%, rgba(255,255,255,0.25) 36%, rgba(255,255,255,0.25) 41%, transparent 41%, transparent 100% ), linear-gradient( 180deg, rgba(239,43,45,0.18) 0%, rgba(239,43,45,0.18) 38%, rgba(255,255,255,0.2) 38%, rgba(255,255,255,0.2) 44%, rgba(0,40,104,0.2) 44%, rgba(0,40,104,0.2) 56%, rgba(255,255,255,0.2) 56%, rgba(255,255,255,0.2) 62%, rgba(239,43,45,0.18) 62%, rgba(239,43,45,0.18) 100% ); }
.country-norway::before { content: '🜃'; font-size: 0.65em; margin-right: 3px; color: rgba(0,40,104,0.7); display: inline-block; animation: no-wave 4s ease-in-out infinite; }
.country-switzerland { background: transparent; color: #2a0a0a; padding: 0.05em 0.45em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, transparent 0%, transparent 40%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.3) 60%, transparent 60%, transparent 100% ), linear-gradient( 180deg, rgba(255,0,0,0.15) 0%, rgba(255,0,0,0.15) 30%, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0.25) 70%, rgba(255,0,0,0.15) 70%, rgba(255,0,0,0.15) 100% ), linear-gradient(rgba(210,0,0,0.12), rgba(210,0,0,0.12)); border: 1.5px solid rgba(210,0,0,0.4); border-radius: 0.2em; }
.country-switzerland::after { content: '✚'; font-size: 0.7em; margin-left: 3px; color: rgba(210,0,0,0.8); display: inline-block; animation: ch-cross 5s ease-in-out infinite; }
.country-greece { background: transparent; color: #0a1a2a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(13,94,175,0.2) 0%, rgba(13,94,175,0.2) 20%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 40%, rgba(13,94,175,0.2) 40%, rgba(13,94,175,0.2) 60%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.08) 80%, rgba(13,94,175,0.2) 80%, rgba(13,94,175,0.2) 100% ); border-top: 1.5px solid rgba(13,94,175,0.5); border-bottom: 1.5px solid rgba(13,94,175,0.5); }
.country-greece::before { content: 'Ω'; font-size: 0.7em; margin-right: 2px; color: rgba(13,94,175,0.8); display: inline-block; animation: gr-omega 5s ease-in-out infinite; }
.country-japan { background: transparent; color: #1a0a0a; padding: 0.05em 0.4em; border-radius: 50% 8px 8px 50% / 50% 12px 12px 50%; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: radial-gradient(ellipse 30% 60% at 18% 50%, rgba(188,0,45,0.22) 0%, rgba(188,0,45,0.08) 60%, transparent 100% ), linear-gradient(transparent 50%, rgba(188,0,45,0.08) 50%); border: 1px solid rgba(188,0,45,0.25); border-left-color: rgba(188,0,45,0.5); }
.country-japan::before { content: '◉'; font-size: 0.9em; margin-right: 3px; color: rgba(188,0,45,0.75); display: inline-block; animation: jp-sun 4s ease-in-out infinite; }
.country-south-korea { background: transparent; color: #0a0a1a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 135deg, rgba(205,46,58,0.15) 0%, rgba(205,46,58,0.15) 50%, rgba(0,71,160,0.15) 50%, rgba(0,71,160,0.15) 100% ), linear-gradient(transparent 55%, rgba(100,100,150,0.12) 55%); border-bottom: 1.5px solid rgba(0,71,160,0.4); border-top: 1.5px solid rgba(205,46,58,0.4); }
.country-south-korea::before { content: '☯'; font-size: 0.7em; margin-right: 3px; color: rgba(100,50,100,0.7); display: inline-block; animation: kr-taiji 6s linear infinite; }
.country-mongolia { background: transparent; color: #1a0a00; padding: 0.05em 0.4em; border-radius: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(200,40,40,0.2) 0%, rgba(200,40,40,0.2) 20%, rgba(0,80,160,0.2) 20%, rgba(0,80,160,0.2) 40%, transparent 40%, transparent 60%, rgba(0,80,160,0.2) 60%, rgba(0,80,160,0.2) 80%, rgba(200,40,40,0.2) 80%, rgba(200,40,40,0.2) 100% ); border-top: 1.5px solid rgba(200,40,40,0.4); border-bottom: 1.5px solid rgba(200,40,40,0.4); }
.country-mongolia::before { content: '⚶'; font-size: 0.65em; margin-right: 3px; color: rgba(200,140,0,0.8); display: inline-block; animation: mn-wind 5s ease-in-out infinite; }
.country-vietnam { background: transparent; color: #2a0a00; padding: 0.05em 0.4em; border-radius: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(218,37,29,0.18) 0px, rgba(218,37,29,0.18) 3px, transparent 3px, transparent 8px ), linear-gradient(rgba(218,37,29,0.1), rgba(218,37,29,0.1)); border-left: 3px solid rgba(218,37,29,0.6); border-bottom: 1.5px solid rgba(255,210,0,0.5); }
.country-vietnam::before { content: '★'; font-size: 0.6em; margin-right: 3px; color: rgba(255,210,0,0.9); display: inline-block; animation: vn-star 3s ease-in-out infinite; }
.country-thailand { background: transparent; color: #1a0a1a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(165,25,50,0.2) 0%, rgba(165,25,50,0.2) 18%, rgba(240,240,240,0.1) 18%, rgba(240,240,240,0.1) 30%, rgba(45,60,135,0.22) 30%, rgba(45,60,135,0.22) 70%, rgba(240,240,240,0.1) 70%, rgba(240,240,240,0.1) 82%, rgba(165,25,50,0.2) 82%, rgba(165,25,50,0.2) 100% ); border-top: 1.5px solid rgba(165,25,50,0.4); border-bottom: 1.5px solid rgba(165,25,50,0.4); }
.country-thailand::before { content: '🐘'; font-size: 0.65em; margin-right: 2px; display: inline-block; animation: th-elephant 4s ease-in-out infinite; }
.country-indonesia { background: transparent; color: #1a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 180deg, rgba(206,17,38,0.22) 0%, rgba(206,17,38,0.22) 50%, rgba(240,240,240,0.1) 50%, rgba(240,240,240,0.1) 100% ); border-top: 1.5px solid rgba(206,17,38,0.5); border-bottom: 1.5px solid rgba(206,17,38,0.2); }
.country-indonesia::after { content: '✦'; font-size: 0.6em; margin-left: 3px; color: rgba(206,17,38,0.7); display: inline-block; animation: id-star 3s ease-in-out infinite; }
.country-india { background: transparent; color: #1a0a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(255,153,51,0.22) 0%, rgba(255,153,51,0.22) 33%, rgba(240,240,240,0.08) 33%, rgba(240,240,240,0.08) 66%, rgba(19,136,8,0.2) 66%, rgba(19,136,8,0.2) 100% ); border-top: 1.5px solid rgba(255,153,51,0.5); border-bottom: 1.5px solid rgba(19,136,8,0.4); }
.country-india::before { content: '⎊'; font-size: 0.7em; margin-right: 3px; color: rgba(0,0,128,0.6); display: inline-block; animation: in-chakra 5s linear infinite; }
.country-myanmar { background: transparent; color: #1a1000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(254,203,0,0.22) 0%, rgba(254,203,0,0.22) 33%, rgba(52,178,51,0.2) 33%, rgba(52,178,51,0.2) 66%, rgba(234,36,40,0.2) 66%, rgba(234,36,40,0.2) 100% ); border-top: 1.5px solid rgba(254,203,0,0.5); border-bottom: 1.5px solid rgba(234,36,40,0.4); }
.country-myanmar::after { content: '★'; font-size: 0.6em; margin-left: 3px; color: rgba(255,255,255,0.9); text-shadow: 0 0 3px rgba(234,36,40,0.6); display: inline-block; animation: mm-star 4s ease-in-out infinite; }
.country-cambodia { background: transparent; color: #0a0a1a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(0,56,168,0.2) 0%, rgba(0,56,168,0.2) 20%, rgba(230,0,40,0.2) 20%, rgba(230,0,40,0.2) 50%, rgba(0,56,168,0.2) 50%, rgba(0,56,168,0.2) 70%, rgba(230,0,40,0.2) 70%, rgba(230,0,40,0.2) 100% ); border-left: 2.5px solid rgba(230,0,40,0.5); }
.country-cambodia::before { content: '🏯'; font-size: 0.62em; margin-right: 3px; display: inline-block; animation: kh-angkor 6s ease-in-out infinite; }
.country-turkey { background: transparent; color: #2a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(227,10,23,0.16) 0px, rgba(227,10,23,0.16) 3px, transparent 3px, transparent 8px ), linear-gradient(rgba(227,10,23,0.1), rgba(227,10,23,0.1)); border-left: 3px solid rgba(227,10,23,0.6); border-bottom: 1.5px solid rgba(227,10,23,0.3); }
.country-turkey::before { content: '☾'; font-size: 0.75em; margin-right: 1px; color: rgba(227,10,23,0.8); display: inline-block; animation: tr-crescent 4s ease-in-out infinite; }
.country-turkey::after { content: '✦'; font-size: 0.45em; margin-left: 1px; color: rgba(227,10,23,0.7); display: inline-block; animation: tr-star 4s ease-in-out infinite; vertical-align: middle; }
.country-iran { background: transparent; color: #0a1a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(36,124,73,0.22) 0%, rgba(36,124,73,0.22) 33%, rgba(240,240,240,0.08) 33%, rgba(240,240,240,0.08) 66%, rgba(218,41,28,0.2) 66%, rgba(218,41,28,0.2) 100% ); border-top: 1.5px solid rgba(36,124,73,0.5); border-bottom: 1.5px solid rgba(218,41,28,0.4); }
.country-iran::before { content: '✡'; font-size: 0.65em; margin-right: 3px; color: rgba(218,41,28,0.7); display: inline-block; animation: ir-emblem 5s ease-in-out infinite; }
.country-saudi-arabia { background: transparent; color: #001a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(0,106,46,0.2) 0px, rgba(0,106,46,0.2) 4px, transparent 4px, transparent 10px ), linear-gradient(rgba(0,106,46,0.12), rgba(0,106,46,0.12)); border-left: 3px solid rgba(0,106,46,0.6); border-bottom: 1.5px solid rgba(180,150,0,0.4); }
.country-saudi-arabia::before { content: '⚔'; font-size: 0.6em; margin-right: 3px; color: rgba(180,150,0,0.85); display: inline-block; animation: sa-sword 5s ease-in-out infinite; }
.country-israel { background: transparent; color: #00001a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(0,56,184,0.18) 0%, rgba(0,56,184,0.18) 15%, rgba(240,240,240,0.05) 15%, rgba(240,240,240,0.05) 85%, rgba(0,56,184,0.18) 85%, rgba(0,56,184,0.18) 100% ); border-top: 1.5px solid rgba(0,56,184,0.4); border-bottom: 1.5px solid rgba(0,56,184,0.4); }
.country-israel::before { content: '✡'; font-size: 0.65em; margin-right: 3px; color: rgba(0,56,184,0.75); display: inline-block; animation: il-star 5s ease-in-out infinite; }
.country-kazakhstan { background: transparent; color: #001a1a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(0,174,199,0.08) 0px, rgba(0,174,199,0.08) 3px, transparent 3px, transparent 10px ), linear-gradient(rgba(0,174,199,0.14), rgba(0,174,199,0.14)); border-left: 3px solid rgba(0,174,199,0.5); border-bottom: 1.5px solid rgba(255,215,0,0.5); }
.country-kazakhstan::before { content: '☀'; font-size: 0.7em; margin-right: 3px; color: rgba(255,215,0,0.9); display: inline-block; animation: kz-sun 4s ease-in-out infinite; }
.country-egypt { background: transparent; color: #1a0a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(20,20,20,0.18) 0%, rgba(20,20,20,0.18) 33%, rgba(240,240,240,0.08) 33%, rgba(240,240,240,0.08) 66%, rgba(206,17,38,0.2) 66%, rgba(206,17,38,0.2) 100% ); border-top: 1.5px solid rgba(20,20,20,0.4); border-bottom: 1.5px solid rgba(206,17,38,0.4); }
.country-egypt::before { content: '𓅃'; font-size: 0.75em; margin-right: 2px; color: rgba(180,140,0,0.85); display: inline-block; animation: eg-eagle 5s ease-in-out infinite; }
.country-ethiopia { background: transparent; color: #001a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(0,155,72,0.22) 0%, rgba(0,155,72,0.22) 33%, rgba(252,209,22,0.22) 33%, rgba(252,209,22,0.22) 66%, rgba(218,18,26,0.2) 66%, rgba(218,18,26,0.2) 100% ); border-top: 1.5px solid rgba(0,155,72,0.5); border-bottom: 1.5px solid rgba(218,18,26,0.4); }
.country-ethiopia::before { content: '✴'; font-size: 0.7em; margin-right: 3px; color: rgba(252,209,22,0.9); display: inline-block; animation: et-star 4s linear infinite; }
.country-south-africa { background: transparent; color: #0a0a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(0,119,73,0.2) 0%, rgba(0,119,73,0.2) 20%, rgba(255,184,28,0.2) 20%, rgba(255,184,28,0.2) 40%, rgba(0,20,137,0.18) 40%, rgba(0,20,137,0.18) 60%, rgba(222,56,49,0.2) 60%, rgba(222,56,49,0.2) 80%, rgba(20,20,20,0.15) 80%, rgba(20,20,20,0.15) 100% ); border-left: 3px solid rgba(0,119,73,0.6); }
.country-south-africa::after { content: '◈'; font-size: 0.65em; margin-left: 3px; color: rgba(255,184,28,0.85); display: inline-block; animation: za-diamond 4s ease-in-out infinite; }
.country-morocco { background: transparent; color: #1a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(193,39,45,0.16) 0px, rgba(193,39,45,0.16) 3px, transparent 3px, transparent 8px ), linear-gradient(rgba(193,39,45,0.1), rgba(193,39,45,0.1)); border-left: 3px solid rgba(193,39,45,0.6); border-bottom: 1.5px solid rgba(0,98,51,0.4); }
.country-morocco::before { content: '✦'; font-size: 0.65em; margin-right: 3px; color: rgba(0,98,51,0.85); display: inline-block; animation: ma-star 3.5s ease-in-out infinite; }
.country-kenya { background: transparent; color: #0a0a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(20,20,20,0.2) 0%, rgba(20,20,20,0.2) 25%, rgba(187,0,0,0.2) 25%, rgba(187,0,0,0.2) 55%, rgba(0,100,0,0.2) 55%, rgba(0,100,0,0.2) 75%, rgba(255,255,255,0.08) 75%, rgba(255,255,255,0.08) 100% ); border-top: 1.5px solid rgba(20,20,20,0.4); border-bottom: 1.5px solid rgba(0,100,0,0.4); }
.country-kenya::before { content: '⚔'; font-size: 0.6em; margin-right: 3px; color: rgba(187,0,0,0.75); display: inline-block; animation: ke-spear 5s ease-in-out infinite; }
.country-united-states { background: transparent; color: #0a0a1a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(187,19,62,0.18) 0px, rgba(187,19,62,0.18) 2px, transparent 2px, transparent 6px ), linear-gradient( 90deg, rgba(60,59,110,0.2) 0%, rgba(60,59,110,0.2) 28%, transparent 28% ); border-top: 1.5px solid rgba(60,59,110,0.5); border-bottom: 1.5px solid rgba(187,19,62,0.4); }
.country-united-states::before { content: '★'; font-size: 0.6em; margin-right: 2px; color: rgba(255,255,255,0.95); text-shadow: 0 0 3px rgba(60,59,110,0.8); display: inline-block; animation: us-star 4s ease-in-out infinite; }
.country-canada { background: transparent; color: #1a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(255,0,0,0.18) 0%, rgba(255,0,0,0.18) 20%, rgba(240,240,240,0.06) 20%, rgba(240,240,240,0.06) 80%, rgba(255,0,0,0.18) 80%, rgba(255,0,0,0.18) 100% ); border-left: 2px solid rgba(255,0,0,0.5); border-right: 2px solid rgba(255,0,0,0.5); }
.country-canada::before { content: '🍁'; font-size: 0.65em; margin-right: 2px; display: inline-block; animation: ca-maple 4s ease-in-out infinite; }
.country-mexico { background: transparent; color: #001a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(0,130,62,0.22) 0%, rgba(0,130,62,0.22) 33%, rgba(240,240,240,0.06) 33%, rgba(240,240,240,0.06) 66%, rgba(206,17,38,0.2) 66%, rgba(206,17,38,0.2) 100% ); border-left: 2px solid rgba(0,130,62,0.6); border-right: 2px solid rgba(206,17,38,0.5); }
.country-mexico::before { content: '🦅'; font-size: 0.62em; margin-right: 2px; display: inline-block; animation: mx-eagle 5s ease-in-out infinite; }
.country-cuba { background: transparent; color: #00001a; padding: 0.05em 0.4em; border-radius: 0 0.15em 0.15em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(0,56,168,0.2) 0%, rgba(0,56,168,0.2) 20%, rgba(240,240,240,0.07) 20%, rgba(240,240,240,0.07) 40%, rgba(0,56,168,0.2) 40%, rgba(0,56,168,0.2) 60%, rgba(240,240,240,0.07) 60%, rgba(240,240,240,0.07) 80%, rgba(0,56,168,0.2) 80%, rgba(0,56,168,0.2) 100% ), linear-gradient( 90deg, rgba(206,17,38,0.25) 0%, rgba(206,17,38,0.25) 22%, transparent 22% ); border-left: 2px solid rgba(206,17,38,0.6); }
.country-cuba::before { content: '★'; font-size: 0.55em; margin-right: 2px; color: rgba(255,255,255,0.9); text-shadow: 0 0 3px rgba(206,17,38,0.8); display: inline-block; animation: cu-star 3.5s ease-in-out infinite; }
.country-guatemala { background: transparent; color: #001a1a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(76,136,191,0.22) 0%, rgba(76,136,191,0.22) 30%, rgba(240,240,240,0.07) 30%, rgba(240,240,240,0.07) 70%, rgba(76,136,191,0.22) 70%, rgba(76,136,191,0.22) 100% ); border-left: 2px solid rgba(76,136,191,0.5); border-right: 2px solid rgba(76,136,191,0.5); }
.country-guatemala::before { content: '🦚'; font-size: 0.62em; margin-right: 2px; display: inline-block; animation: gt-quetzal 5s ease-in-out infinite; }
.country-brazil { background: transparent; color: #001a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 135deg, rgba(0,156,59,0.15) 0%, rgba(0,156,59,0.15) 25%, rgba(255,223,0,0.2) 25%, rgba(255,223,0,0.2) 75%, rgba(0,156,59,0.15) 75%, rgba(0,156,59,0.15) 100% ), linear-gradient(rgba(0,39,118,0.08), rgba(0,39,118,0.08)); border: 1.5px solid rgba(0,156,59,0.4); border-bottom-color: rgba(255,223,0,0.5); }
.country-brazil::before { content: '★'; font-size: 0.6em; margin-right: 2px; color: rgba(0,39,118,0.8); display: inline-block; animation: br-star 4s ease-in-out infinite; }
.country-argentina { background: transparent; color: #001020; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(116,172,223,0.22) 0%, rgba(116,172,223,0.22) 28%, rgba(240,240,240,0.08) 28%, rgba(240,240,240,0.08) 72%, rgba(116,172,223,0.22) 72%, rgba(116,172,223,0.22) 100% ); border-top: 1.5px solid rgba(116,172,223,0.5); border-bottom: 1.5px solid rgba(116,172,223,0.5); }
.country-argentina::before { content: '☀'; font-size: 0.7em; margin-right: 2px; color: rgba(240,179,35,0.9); display: inline-block; animation: ar-sun 5s ease-in-out infinite; }
.country-chile { background: transparent; color: #0a001a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 50%, rgba(213,43,30,0.2) 50%, rgba(213,43,30,0.2) 100% ), linear-gradient( 90deg, rgba(0,57,166,0.22) 0%, rgba(0,57,166,0.22) 22%, transparent 22% ); border-left: 2px solid rgba(0,57,166,0.5); border-bottom: 1.5px solid rgba(213,43,30,0.4); }
.country-chile::before { content: '★'; font-size: 0.55em; margin-right: 2px; color: rgba(255,255,255,0.95); text-shadow: 0 0 3px rgba(0,57,166,0.7); display: inline-block; animation: cl-star 4s ease-in-out infinite; }
.country-peru { background: transparent; color: #1a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(210,16,52,0.22) 0%, rgba(210,16,52,0.22) 30%, rgba(240,240,240,0.07) 30%, rgba(240,240,240,0.07) 70%, rgba(210,16,52,0.22) 70%, rgba(210,16,52,0.22) 100% ); border-left: 2px solid rgba(210,16,52,0.5); border-right: 2px solid rgba(210,16,52,0.5); }
.country-peru::before { content: '⛰'; font-size: 0.65em; margin-right: 3px; color: rgba(210,16,52,0.7); display: inline-block; animation: pe-mtn 6s ease-in-out infinite; }
.country-colombia { background: transparent; color: #1a0a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(252,209,22,0.25) 0%, rgba(252,209,22,0.25) 40%, rgba(0,56,147,0.2) 40%, rgba(0,56,147,0.2) 70%, rgba(206,17,38,0.2) 70%, rgba(206,17,38,0.2) 100% ); border-top: 1.5px solid rgba(252,209,22,0.6); border-bottom: 1.5px solid rgba(206,17,38,0.4); }
.country-colombia::after { content: '✦'; font-size: 0.6em; margin-left: 3px; color: rgba(252,209,22,0.9); display: inline-block; animation: co-gem 3.5s ease-in-out infinite; }
.country-australia { background: transparent; color: #00001a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( -45deg, rgba(0,0,139,0.08) 0px, rgba(0,0,139,0.08) 3px, transparent 3px, transparent 9px ), repeating-linear-gradient( 45deg, rgba(0,0,139,0.06) 0px, rgba(0,0,139,0.06) 3px, transparent 3px, transparent 9px ), linear-gradient(rgba(0,0,139,0.14), rgba(0,0,139,0.14)); border-top: 1.5px solid rgba(0,0,139,0.4); border-bottom: 1.5px solid rgba(204,0,0,0.3); }
.country-australia::before { content: '✦'; font-size: 0.55em; margin-right: 1px; color: rgba(255,255,255,0.9); text-shadow: 0 0 4px rgba(0,0,180,0.8); display: inline-block; animation: au-cross1 5s ease-in-out infinite; }
.country-australia::after { content: '·✦·'; font-size: 0.45em; margin-left: 1px; color: rgba(255,255,255,0.8); text-shadow: 0 0 4px rgba(0,0,180,0.7); letter-spacing: 1px; display: inline-block; animation: au-cross2 5s ease-in-out 0.5s infinite; }
.country-new-zealand { background: transparent; color: #00001a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( -40deg, rgba(0,0,139,0.09) 0px, rgba(0,0,139,0.09) 2px, transparent 2px, transparent 8px ), linear-gradient(rgba(0,0,139,0.15), rgba(0,0,139,0.15)); border-top: 1.5px solid rgba(0,0,139,0.4); border-left: 2px solid rgba(204,0,0,0.4); }
.country-new-zealand::before { content: '✦'; font-size: 0.55em; margin-right: 2px; color: rgba(220,0,0,0.85); text-shadow: 0 0 3px rgba(255,255,255,0.6); display: inline-block; animation: nz-star 4s ease-in-out infinite; }
.country-new-zealand::after { content: '🌿'; font-size: 0.6em; margin-left: 2px; display: inline-block; animation: nz-fern 5s ease-in-out infinite; }
.country-papua-new-guinea { background: transparent; color: #1a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 145deg, rgba(20,20,20,0.2) 0%, rgba(20,20,20,0.2) 50%, rgba(200,0,0,0.2) 50%, rgba(200,0,0,0.2) 100% ); border-top: 1.5px solid rgba(20,20,20,0.4); border-bottom: 1.5px solid rgba(200,0,0,0.4); }
.country-papua-new-guinea::before { content: '🦜'; font-size: 0.65em; margin-right: 2px; display: inline-block; animation: pg-bird 4s ease-in-out infinite; }
.country-papua-new-guinea::after { content: '✦'; font-size: 0.5em; margin-left: 2px; color: rgba(255,215,0,0.85); display: inline-block; animation: pg-star 3s ease-in-out infinite; }
.country-fiji { background: transparent; color: #001a1a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(0,168,189,0.16) 0px, rgba(0,168,189,0.16) 3px, transparent 3px, transparent 9px ), linear-gradient(rgba(0,168,189,0.1), rgba(0,168,189,0.1)); border-left: 3px solid rgba(0,168,189,0.55); border-bottom: 1.5px solid rgba(0,168,189,0.3); }
.country-fiji::before { content: '🌊'; font-size: 0.65em; margin-right: 2px; display: inline-block; animation: fj-wave 3s ease-in-out infinite; }
.country-samoa { background: transparent; color: #1a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( rgba(206,17,38,0.16), rgba(206,17,38,0.16) ), linear-gradient( 90deg, rgba(0,45,135,0.22) 0%, rgba(0,45,135,0.22) 35%, transparent 35% ); border-left: 2px solid rgba(0,45,135,0.5); border-bottom: 1.5px solid rgba(206,17,38,0.4); }
.country-samoa::before { content: '✦'; font-size: 0.5em; margin-right: 2px; color: rgba(255,255,255,0.95); text-shadow: 0 0 3px rgba(0,45,135,0.7); display: inline-block; animation: ws-star 4s ease-in-out infinite; }
.country-samoa::after { content: '🌺'; font-size: 0.6em; margin-left: 2px; display: inline-block; animation: ws-flower 5s ease-in-out infinite; }
.country-poland { background: transparent; color: #1a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( 180deg, rgba(240,240,240,0.1) 0%, rgba(240,240,240,0.1) 50%, rgba(220,20,60,0.2) 50%, rgba(220,20,60,0.2) 100% ); border-top: 1.5px solid rgba(240,240,240,0.5); border-bottom: 1.5px solid rgba(220,20,60,0.5); }
.country-poland::before { content: '🦅'; font-size: 0.62em; margin-right: 2px; display: inline-block; filter: grayscale(0.3) sepia(0.2); animation: pl-eagle 5s ease-in-out infinite; }
.country-hungary { background: transparent; color: #1a0000; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(206,41,57,0.22) 0%, rgba(206,41,57,0.22) 33%, rgba(240,240,240,0.08) 33%, rgba(240,240,240,0.08) 66%, rgba(68,138,72,0.2) 66%, rgba(68,138,72,0.2) 100% ); border-top: 1.5px solid rgba(206,41,57,0.5); border-bottom: 1.5px solid rgba(68,138,72,0.4); }
.country-hungary::before { content: '✙'; font-size: 0.7em; margin-right: 3px; color: rgba(206,41,57,0.75); display: inline-block; animation: hu-cross 5s ease-in-out infinite; }
.country-czech { background: transparent; color: #00001a; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(240,240,240,0.1) 0%, rgba(240,240,240,0.1) 50%, rgba(215,20,26,0.2) 50%, rgba(215,20,26,0.2) 100% ), linear-gradient( 90deg, rgba(17,69,148,0.22) 0%, rgba(17,69,148,0.22) 28%, transparent 28% ); border-left: 2px solid rgba(17,69,148,0.5); border-bottom: 1.5px solid rgba(215,20,26,0.4); }
.country-czech::before { content: '⬡'; font-size: 0.6em; margin-right: 2px; color: rgba(17,69,148,0.8); display: inline-block; animation: cz-gem 4s ease-in-out infinite; }
.country-serbia { background: transparent; color: #0a0010; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 180deg, rgba(198,12,48,0.22) 0%, rgba(198,12,48,0.22) 33%, rgba(0,55,155,0.2) 33%, rgba(0,55,155,0.2) 66%, rgba(240,240,240,0.08) 66%, rgba(240,240,240,0.08) 100% ); border-top: 1.5px solid rgba(198,12,48,0.5); border-bottom: 1.5px solid rgba(240,240,240,0.4); }
.country-serbia::before { content: '⚜'; font-size: 0.65em; margin-right: 2px; color: rgba(198,12,48,0.75); display: inline-block; animation: rs-emblem 5s ease-in-out infinite; }
.country-romania { background: transparent; color: #001a00; padding: 0.05em 0.4em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: repeating-linear-gradient( 90deg, rgba(0,43,127,0.22) 0%, rgba(0,43,127,0.22) 33%, rgba(252,209,22,0.25) 33%, rgba(252,209,22,0.25) 66%, rgba(206,17,38,0.2) 66%, rgba(206,17,38,0.2) 100% ); border-left: 2px solid rgba(0,43,127,0.5); border-right: 2px solid rgba(206,17,38,0.5); }
.country-romania::after { content: '🏰'; font-size: 0.6em; margin-left: 3px; display: inline-block; animation: ro-castle 6s ease-in-out infinite; }
.country-china2 { background: transparent; color: #2a0000; padding: 0.05em 0.5em 0.05em 0.4em; border-radius: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( rgba(190,10,10,0.22), rgba(190,10,10,0.22) ); border-left: 3px solid rgba(190,10,10,0.7); border-top: 1.5px solid rgba(190,10,10,0.4); border-bottom: 1.5px solid rgba(190,10,10,0.4); }
.country-china2::before { content: '★'; font-size: 0.75em; margin-right: 0px; color: rgba(220,170,0,0.95); display: inline-block; animation: cn-bigstar 4s ease-in-out infinite; }
.country-china2::after { content: '⁺˙✦˙'; font-size: 0.42em; margin-left: 1px; color: rgba(220,170,0,0.88); letter-spacing: 1px; display: inline-block; vertical-align: middle; animation: cn-smallstars 4s ease-in-out infinite; }
.country-china { background: transparent; color: #2a0000; padding: 0.05em 0.4em; border-radius: 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( rgba(190,10,10,0.16), rgba(190,10,10,0.16) ), repeating-linear-gradient( 90deg, rgba(220,170,0,0.08) 0px, rgba(220,170,0,0.08) 2px, transparent 2px, transparent 12px ); border-left: 3px solid rgba(190,10,10,0.6); border-bottom: 1.5px solid rgba(220,170,0,0.5); }
.country-china::before { content: '★'; font-size: 0.65em; margin-right: 2px; color: #E2143C; display: inline-block; animation: cn-star 4s ease-in-out infinite; }
.country-china3 { background: transparent; color: #2a0000; padding: 0.05em 0.5em 0.05em 1.8em; border-radius: 0.1em; position: relative; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient( rgba(190,10,10,0.22), rgba(190,10,10,0.22) ); border-left: 3px solid rgba(190,10,10,0.7); border-top: 1.5px solid rgba(190,10,10,0.4); border-bottom: 1.5px solid rgba(190,10,10,0.4); }
.country-china3::before { content: '★'; position: absolute; left: 0.18em; top: 50%; transform: translateY(-50%); font-size: 0.82em; color: rgba(220,170,0,0.95); line-height: 1; animation: cn-bigstar 4s ease-in-out infinite; }
.country-china3::after { content: '★' '\A' '★' '\A' '★' '\A' '★'; white-space: pre; position: absolute; left: 0.92em; top: 50%; transform: translateY(-54%); font-size: 0.32em; color: rgba(220,170,0,0.92); line-height: 1.45; letter-spacing: 0; /* 四星纵向排列，模拟弧形右侧环绕 */ animation: cn-smallstars 4s ease-in-out infinite; }
@keyframes cn-bigstar { 0%, 100% { opacity: 0.85; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.12); } }
@keyframes cn-smallstars { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes cn-bigstar { 0%, 100% { opacity: 0.85; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.12); } }
@keyframes cn-smallstars { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes cn-bigstar { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes cn-smallstars { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes ro-castle { 0%, 100% { opacity: 0.6; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1px); } }
@keyframes rs-emblem { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes cz-gem { 0%, 100% { opacity: 0.5; transform: rotate(0deg) scale(1); } 50% { opacity: 1; transform: rotate(30deg) scale(1.15); } }
@keyframes hu-cross { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes pl-eagle { 0%, 100% { opacity: 0.7; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.08); } }
@keyframes ws-star { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes ws-flower { 0%, 100% { transform: rotate(-8deg); opacity: 0.7; } 50% { transform: rotate(8deg); opacity: 1; } }
@keyframes fj-wave { 0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.7; } 50% { transform: translateX(2px) scaleX(1.05); opacity: 1; } }
@keyframes pg-bird { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-2px) rotate(5deg); } }
@keyframes pg-star { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes nz-star { 0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(20deg); } }
@keyframes nz-fern { 0%, 100% { transform: rotate(-5deg); opacity: 0.7; } 50% { transform: rotate(5deg); opacity: 1; } }
@keyframes au-cross1 { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes au-cross2 { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }
@keyframes co-gem { 0%, 100% { opacity: 0.5; transform: rotate(0deg) scale(1); } 50% { opacity: 1; transform: rotate(45deg) scale(1.25); } }
@keyframes pe-mtn { 0%, 100% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes cl-star { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes ar-sun { 0%, 100% { opacity: 0.6; transform: rotate(0deg) scale(1); } 50% { opacity: 1; transform: rotate(20deg) scale(1.15); } }
@keyframes br-star { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes gt-quetzal { 0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.7; } 50% { transform: translateY(-2px) rotate(5deg); opacity: 1; } }
@keyframes cu-star { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes mx-eagle { 0%, 100% { opacity: 0.7; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.1); } }
@keyframes ca-maple { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.1); } }
@keyframes us-star { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes ke-spear { 0%, 100% { transform: rotate(-10deg); opacity: 0.6; } 50% { transform: rotate(10deg); opacity: 1; } }
@keyframes ma-star { 0%, 100% { opacity: 0.5; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(30deg); } }
@keyframes za-diamond { 0%, 100% { opacity: 0.5; transform: rotate(0deg) scale(1); } 50% { opacity: 1; transform: rotate(45deg) scale(1.2); } }
@keyframes et-star { 0% { transform: rotate(0deg); opacity: 0.7; } 100% { transform: rotate(360deg); opacity: 1; } }
@keyframes eg-eagle { 0%, 100% { opacity: 0.6; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.1); } }
@keyframes kz-sun { 0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
@keyframes il-star { 0%, 100% { opacity: 0.5; transform: rotate(0deg); } 50% { opacity: 1; transform: rotate(30deg); } }
@keyframes sa-sword { 0%, 100% { opacity: 0.6; transform: rotate(-5deg); } 50% { opacity: 1; transform: rotate(5deg); } }
@keyframes ir-emblem { 0%, 100% { opacity: 0.5; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(15deg); } }
@keyframes tr-crescent { 0%, 100% { transform: rotate(-8deg); opacity: 0.7; } 50% { transform: rotate(8deg); opacity: 1; } }
@keyframes tr-star { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes kh-angkor { 0%, 100% { opacity: 0.6; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1px); } }
@keyframes mm-star { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes in-chakra { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes id-star { 0%, 100% { opacity: 0.5; transform: rotate(0deg) scale(1); } 50% { opacity: 1; transform: rotate(45deg) scale(1.2); } }
@keyframes th-elephant { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }
@keyframes vn-star { 0%, 100% { opacity: 0.6; transform: translateY(0) scale(1); } 50% { opacity: 1; transform: translateY(-1px) scale(1.15); } }
@keyframes mn-wind { 0%, 100% { transform: rotate(-8deg); opacity: 0.6; } 50% { transform: rotate(8deg); opacity: 1; } }
@keyframes cn-star { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes kr-taiji { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes jp-sun { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes gr-omega { 0%, 100% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1px); } }
@keyframes ch-cross { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes no-wave { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2px); } 75% { transform: translateY(2px); } }
@keyframes se-snow { 0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.6; } 50% { transform: rotate(30deg) scale(1.1); opacity: 1; } }
@keyframes ru-eagle { 0%, 100% { opacity: 0.5; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.1); } }
@keyframes uk-crown { 0%, 100% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1px); } }
@keyframes es-knight { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes it-col { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes fr-fleur { 0%, 100% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1px); } }
@keyframes de-gear { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes windmill { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Got a creative style that makes your notes pop? Share it here!
This is a place to showcase your visual styles — gradient headings, glowing keywords, neon highlights, animated text... anything that looks cool in your vault.
做了一个好看的样式效果？来这里分享吧！
这是一个展示创意视觉效果的地方 — 渐变标题、发光关键词、霓虹高亮、动画文字……只要好看就行。
How to Get CSS Code
Generate styles with AI — Regex CSS Highlighter includes a built-in entry point for style generation: describe the effect you want and let AI do the work. For more complex animations or multi-property styles, Claude tends to produce more reliable results than the built-in prompt.
Screenshot (for static styles) or screen record (for animated effects like glows, pulses, or underline animations) to show how it looks in your notes — video is lighter on the page than GIFs.
如何获取CSS代码
用AI生成样式 — Regex CSS Highlighter 提供了样式生成的功能入口, 描述你想要的效果，让AI帮你生成。想要更好的效果可以用 Claude，处理复杂动画和多属性样式比内置Prompt更稳。
截图（静态样式）或录屏（有动画效果的，比如发光、脉冲、下划线动画）展示在笔记里的样子——视频比GIF省流量，页面也更轻。
Example
CSS:
CSS CODE
CSS CODE
Beta Was this translation helpful? Give feedback.
All reactions