小 |
小 |
||
| 第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--glow { | ||
| + | position: absolute; | ||
| + | left: 0; | ||
| + | top: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | border-radius: 8px; | ||
| + | background-image: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | .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> | ||
| 第61行： | 第99行： | ||
<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--glow"> </div> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | <div | + | <div class="rainbow-glow--content"> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
YOOHOO | YOOHOO | ||
</div> | </div> | ||
2021年4月13日 (二) 16:16的版本
/ / 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
YOOHOO
- The
filterproperty will eliminate inline styles (wish I could use this on the glow layer though)
CREmoteFixes
This may fix most of inconsistent vertical alignment and allow better visual effect.
After testing in CR emoticon pages, this fix isn't quite ideal because icons may either have oversized width, or non-transparent background, etc.
