小 |
小 |
||
(未显示同一用户的20个中间版本) | |||
第49行: | 第49行: | ||
<div> | <div> | ||
<p style="text-align: center; margin-bottom: 2rem;"> | <p style="text-align: center; margin-bottom: 2rem;"> | ||
− | Visit <a href="http://un1c0de.xyz/">my personal website</a> to find out who I am and what I am doing. | + | Visit <a href="http://un1c0de.xyz/" target="_blank">my personal website</a> to find out who I am and what I am doing. |
</p> | </p> | ||
</div> | </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> | </html> | ||
第57行: | 第119行: | ||
<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> | ||
第114行: | 第138行: | ||
<div> | <div> | ||
− | <p>This | + | <p>This '''MAY''' fix most of inconsistent vertical alignment and allow better visual effect.</p> |
<div | <div | ||
第126行: | 第150行: | ||
color: #000; border-left: | color: #000; border-left: | ||
8px solid #f00; | 8px solid #f00; | ||
+ | margin-bottom: 2rem; | ||
" | " | ||
> | > | ||
<div>[[File:Info.png|20px]]</div> | <div>[[File:Info.png|20px]]</div> | ||
− | <div style="margin-left: .5em;"> | + | <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> | ||
+ | |||
+ | <div style="margin-top: 2rem;"> | ||
+ | <comments /> | ||
</div> | </div> |
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.
开启评论自动刷新