小 |
小 |
||
(未显示同一用户的28个中间版本) | |||
第1行: | 第1行: | ||
<html> | <html> | ||
<div style="display: flex; justify-content: center; margin-bottom: 2rem;"> | <div style="display: flex; justify-content: center; margin-bottom: 2rem;"> | ||
− | <p | + | <p |
style=" | style=" | ||
− | + | display: block; | |
− | + | flex: 0 0 auto; | |
− | + | font-family: 'Consolas', monospace; | |
− | + | font-size: 14px; | |
− | + | font-weight: bold; | |
− | + | line-height: 0.75; | |
− | + | letter-spacing: 0; | |
− | + | white-space: pre; | |
− | + | background-color: transparent; | |
− | + | cursor: default; | |
− | + | user-select: none; | |
" | " | ||
data-minlength="60" | data-minlength="60" | ||
data-maxlength="124" | data-maxlength="124" | ||
− | > | + | > |
/ | / | ||
/ | / | ||
第44行: | 第44行: | ||
! | ! | ||
− | </p> | + | </p> |
</div> | </div> | ||
− | <p style="text-align: center; margin-bottom: 2rem;"> | + | <div> |
− | Visit | + | <p style="text-align: center; margin-bottom: 2rem;"> |
− | <a href="http://un1c0de.xyz/">my personal website</a> | + | Visit <a href="http://un1c0de.xyz/" target="_blank">my personal website</a> to find out who I am and what I am doing. |
− | to find out who I am and what I am doing | + | </p> |
− | </p> | + | </div> |
− | < | + | <style> |
− | + | .rainbow-glow--wrapper { | |
− | + | position: relative; | |
− | + | width: 8rem; | |
− | + | height: 4rem; | |
− | + | padding: 4px; | |
− | + | box-sizing: border-box; | |
− | + | } | |
− | + | ||
− | + | .rainbow-glow--gradient { | |
− | + | overflow: hidden; | |
− | + | position: absolute; | |
− | + | left: 0; | |
− | + | top: 0; | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | border-radius: 8px; | |
− | + | box-sizing: border-box; | |
− | + | filter: blur(2px); | |
− | + | } | |
− | </ | + | |
+ | .rainbow-glow--gradient::before { | ||
+ | content: " "; | ||
+ | display: block; | ||
+ | width: 200%; | ||
+ | height: 0; | ||
+ | padding-top: 200%; | ||
+ | margin-top: -75%; | ||
+ | margin-left: -50%; | ||
+ | background-image: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); | ||
+ | box-sizing: border-box; | ||
+ | animation: rotate 2s infinite linear; | ||
+ | } | ||
+ | |||
+ | @keyframes rotate { | ||
+ | 0% { | ||
+ | transform: rotate(0); | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | transform: rotate(1turn); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .rainbow-glow--content { | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | padding: .5rem 1rem; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #fff; | ||
+ | color: #000; | ||
+ | border: solid 2px #000; | ||
+ | border-width: 2px 3px 4px; | ||
+ | border-radius: 6px; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | </style> | ||
+ | </html> | ||
− | < | + | <div> |
<h2>Some effects</h2> | <h2>Some effects</h2> | ||
− | <div style="width: 100%; display: grid; grid-template-columns: 1fr 1fr | + | <div style="width: 100%; display: grid; grid-template-columns: 1fr 1fr 100fr; justify-content: center; align-items: center;"> |
− | <div>Rainbow Glow</div> | + | <div style="white-space: nowrap;">Rainbow Glow</div> |
<div style="display: flex; justify-content: center; margin: 0 2rem;"> | <div style="display: flex; justify-content: center; margin: 0 2rem;"> | ||
− | <div class="rainbow-glow--wrapper | + | <div class="rainbow-glow--wrapper"> |
− | <div | + | <div class="rainbow-glow--gradient"></div> |
− | + | <div class="rainbow-glow--content">YOOHOO</div> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | <div | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
<div> | <div> | ||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
− | </ | + | </div> |
− | < | + | <div> |
<h2>CREmoteFixes</h2> | <h2>CREmoteFixes</h2> | ||
− | < | + | <div> |
− | <p>This | + | <p>This '''MAY''' fix most of inconsistent vertical alignment and allow better visual effect.</p> |
− | <div style="font-size: 12px; display: flex; flex-flow: row nowrap; align-items: center; padding: .5rem; background-color: #fff; color: #000; border-left: 8px solid #f00;"> | + | <div |
+ | style=" | ||
+ | font-size: 12px; | ||
+ | display: flex; | ||
+ | flex-flow: row nowrap; | ||
+ | align-items: center; | ||
+ | padding: .5rem; | ||
+ | background-color: #fff; | ||
+ | color: #000; border-left: | ||
+ | 8px solid #f00; | ||
+ | margin-bottom: 2rem; | ||
+ | " | ||
+ | > | ||
<div>[[File:Info.png|20px]]</div> | <div>[[File:Info.png|20px]]</div> | ||
− | <div style="margin-left: .5em;>After testing in CR emoticon pages, this fix isn't quite ideal because icons may either have oversized width, or non-transparent background, etc.</div> | + | <div style="margin-left: .5em;">After testing in CR emoticon pages, this fix isn't quite ideal because icons may either have oversized width, or non-transparent background, etc.</div> |
</div> | </div> | ||
− | <div style="display: flex;"> | + | <div style="display: flex; margin: 0 -1rem -1rem 0;"> |
− | <div style="flex: 0 0 auto; | + | <div style="flex: 0 0 auto; margin: 0 1rem 1rem 0;"> |
− | <div style=" | + | <div style="padding: 4px; margin-bottom: 4px; background: linear-gradient(to right bottom, #7AF99B,#D6C499,#F38691); border-radius: 16px;"> |
<div style="width: 100px; height: 76px; position: relative;"> | <div style="width: 100px; height: 76px; position: relative;"> | ||
<div style="position: absolute; bottom: 0;">[[File:CR_Emote_Dagger_Goblin.png|100px]]</div> | <div style="position: absolute; bottom: 0;">[[File:CR_Emote_Dagger_Goblin.png|100px]]</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | {{AudioButton|CR_Emote_Dagger_Goblin.mp3}} | + | <div style="text-align: center;">{{AudioButton|CR_Emote_Dagger_Goblin.mp3}}</div> |
</div> | </div> | ||
− | <div style="flex: 0 0 auto; | + | <div style="flex: 0 0 auto; margin: 0 1rem 1rem 0;"> |
− | <div style=" | + | <div style="padding: 4px; margin-bottom: 4px; background: linear-gradient(to right bottom, #7AF99B,#D6C499,#F38691); border-radius: 16px;"> |
<div style="width: 100px; height: 76px; position: relative;"> | <div style="width: 100px; height: 76px; position: relative;"> | ||
<div style="position: absolute; bottom: 0;">[[File:CR_Emote_Thumbs-Up_Princess.png|100px]]</div> | <div style="position: absolute; bottom: 0;">[[File:CR_Emote_Thumbs-Up_Princess.png|100px]]</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | {{AudioButton|CR_Emote_Thumbs-Up_Princess.mp3}} | + | <div style="text-align: center;">{{AudioButton|CR_Emote_Thumbs-Up_Princess.mp3}}</div> |
</div> | </div> | ||
− | <div style="flex: 0 0 auto; | + | <div style="flex: 0 0 auto; margin: 0 1rem 1rem 0;"> |
− | <div style=" | + | <div style="padding: 4px; margin-bottom: 4px; background: #fff; border-radius: 16px;"> |
<div style="width: 100px; height: 76px; position: relative;"> | <div style="width: 100px; height: 76px; position: relative;"> | ||
<div style="position: absolute; bottom: 0;">[[File:CR_Emote_Rocket_Hoggy.png|100px]]</div> | <div style="position: absolute; bottom: 0;">[[File:CR_Emote_Rocket_Hoggy.png|100px]]</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | {{AudioButton|CR_Emote_Rocket_Hoggy.mp3}} | + | <div style="text-align: center;">{{AudioButton|CR_Emote_Rocket_Hoggy.mp3}}</div> |
</div> | </div> | ||
</div> | </div> | ||
− | </ | + | </div> |
+ | </div> | ||
− | + | <div style="margin-top: 2rem;"> | |
− | + | <comments /> | |
− | + | </div> | |
− | <comments /> | ||
− | </ |
2021年4月13日 (二) 16:45的最新版本
/ / b. / *#V .i A .##. _..-#] A .#. .# *#. ___________ ..-=########7 i#. %## ;#' q#. `^----=######=############7 b ;###. O###T 4 ;7 9#. 'q####P^*'` "'` ##- ##### ;#### .## -=A ;# .###. ##:"` ### ;##`##; J### -###7 .=##%} .-=..#: ;#`##. .##' _.--==- .##; ##7 |## .### _-##### .#####= @#######7 :#7 ##o d## .-=######7 ;## ;##` ###. ;##" -+=^*`##: .####* &#** ;##. ##: `###. .###$P^*"` " ##; ##: #### $#: ##7 .### ## #^##. ;##' ####. :##` .## ;## ##$#; ##' ;## .##P ## #7 `##. ### =###-### .. ;#7 d#: .#7?## :#7 ##7 .##P ## ;# >#k> ### ... `#####7 ..--==######=-._ ## .-=##' ;#' $#./#: %## &#$ .=A ## .##+=euG; d################' .-=################H. ;##=###### ## ?#L## ###* *###v==###=##7 ##########7.##################.-#####$P^*"'` `*^V* @###=^` t# .#7 ###: <@##; `##########/ *$^#` `>#####^*"` `*#########*` *#° Y d#' :##: *V *" ' #7 .###*` B#####P* .## K^` ## 4$*` *@##* ##: .# .$ `V* z@# /7 7 *# # 7 ;7 !
Visit my personal website to find out who I am and what I am doing.
Some effects
CREmoteFixes
This MAY fix most of inconsistent vertical alignment and allow better visual effect.
开启评论自动刷新