avatar
匿名用户
×
创建一个新的页面
输入页面标题：
目前语音维基上有2062个页面。 在上方输入您想创建的页面名称或单击以下标题之一，即可开始撰写！



语音维基
语音维基 | VoiceWiki
2062页面数
  最近更改

“用户:UN1C0DE”的版本间的差异
小
 
（未显示2个用户的49个中间版本）
第1行： 第1行：
 +
<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;  
+
  display: block;  
−
    flex: 0 0 auto;
+
  flex: 0 0 auto;
−
    font-family: 'Consolas', monospace;  
+
  font-family: 'Consolas', monospace;  
−
    font-size: 14px;  
+
  font-size: 14px;  
−
    font-weight: bold;  
+
  font-weight: bold;  
−
    line-height: 0.75;  
+
  line-height: 0.75;  
−
    letter-spacing: 0;  
+
  letter-spacing: 0;  
−
    white-space: pre;  
+
  white-space: pre;  
−
    background-color: transparent;  
+
  background-color: transparent;  
−
    cursor: default;  
+
  cursor: default;  
−
    user-select: none;
+
  user-select: none;
 
   "
 
   "
 
   data-minlength="60"
 
   data-minlength="60"
 
   data-maxlength="124"
 
   data-maxlength="124"
−
>
+
>
 
                                                                     /
 
                                                                     /
 
                                                                   /
 
                                                                   /
第43行： 第44行：
 
                                                 !
 
                                                 !
  
−
</p>
+
</p>
 
</div>
 
</div>
  
−
<p style="text-align: center; margin-bottom: 2rem;">
+
<div>
−
Visit  
+
<p style="text-align: center; margin-bottom: 2rem;">
−
<br>
+
  Visit <a href="http://un1c0de.xyz/" target="_blank">my personal website</a> to find out who I am and what I am doing.
−
http://un1c0de.xyz/  
+
</p>
−
<br>
+
</div>
−
to find out who I am and what I am doing
+
 
−
</p>
+
<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 style="text-align: center;">
+
<div>
−
  <p style="
+
<h2>Some effects</h2>
−
    flex: 0 0 auto;
 
−
    display: inline-flex;
 
−
    justify-content: center;
 
−
    align-items: center;
 
−
    width: 2em;
 
−
    height: 2em;
 
−
    color: #000;
 
−
    border-radius: 50%;
 
−
    background-image: radial-gradient(circle at 12.5% 50%, #ffef00, #b48500);
 
−
    font-size: 1.5rem;
 
−
    font-weight: bold;
 
−
    text-align: center;
 
−
    cursor: default;
 
−
    user-select: none;
 
−
    transform: rotate(90deg);
 
−
  ">
 
−
    :D
 
−
  </p>
 
−
</div>
 
  
−
== Some effects ==
+
<div style="width: 100%; display: grid; grid-template-columns: 1fr 1fr 100fr; justify-content: center; align-items: center;">
 +
  <div style="white-space: nowrap;">Rainbow Glow</div>
  
−
{| style="width: 100%"
+
  <div style="display: flex; justify-content: center; margin: 0 2rem;">
−
|-
+
  <div class="rainbow-glow--wrapper">
−
|
+
     <div class="rainbow-glow--gradient"></div>
−
Rainbow Glow
+
     <div class="rainbow-glow--content">YOOHOO</div>
−
| align=center |
+
  </div>
−
<div style="display: flex; justify-content: center; margin: 0 2rem;">
 
−
  <div class="rainbow-glow--wrapper" style="position: relative; width: 8rem; height: 4rem; padding: 4px; box-sizing: border-box;">
 
−
     <div class="rainbow-glow--glow" style="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;">&nbsp;</div>
 
−
     <div class="rainbow-glow--content" style="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;">YOOHOO</div>
 
 
   </div>
 
   </div>
 +
 
 +
  <div>
 +
  </div>
 +
</div>
 
</div>
 
</div>
−
|
 
−
* The <code>filter</code> property will eliminate inline styles (wish I could use this on the glow layer though)
 
−
|}
 
  
−
== CREmoteFixes ==
+
<div>
−
This may fix most of inconsistent vertical alignment and allow better visual effect.
+
<h2>CREmoteFixes</h2>
  
−
<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>
−
   <div>[[File:Info.png|20px]]</div>
+
   <p>This '''MAY''' fix most of inconsistent vertical alignment and allow better visual effect.</p>
−
  <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
−
|-
+
  style="
−
|
+
    font-size: 12px;
−
{|
+
    display: flex;  
−
|-
+
    flex-flow: row nowrap;  
−
| align=center style="height: 120px; vertical-align: bottom;" |
+
    align-items: center;  
−
<div style="display: inline-block; padding: 4px; margin-bottom: 4px; background: linear-gradient(to right bottom, #7AF99B,#D6C499,#F38691); border-radius: 16px;">
+
    padding: .5rem;  
−
  <div style="width: 100px; height: 76px; position: relative;">
+
    background-color: #fff;  
−
    <div style="position: absolute; bottom: 0;">[[File:CR_Emote_Dagger_Goblin.png|100px]]</div>
+
    color: #000; border-left:
 +
    8px solid #f00;
 +
    margin-bottom: 2rem;
 +
  "
 +
  >
 +
  <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>
 
   </div>
−
</div>
+
 
−
|-
+
  <div style="display: flex; margin: 0 -1rem -1rem 0;">
−
| align=center style="width:100px;" |
+
  <div style="flex: 0 0 auto; margin: 0 1rem 1rem 0;">
−
<span class="audio-player">[[Media:CR_Emote_Dagger_Goblin.mp3]]</span>
+
    <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="position: absolute; bottom: 0;">[[File:CR_Emote_Dagger_Goblin.png|100px]]</div>
−
{|
+
    </div>
−
|-
+
    </div>
−
| align=center style="height: 120px; vertical-align: bottom;" |
+
    <div style="text-align: center;">{{AudioButton|CR_Emote_Dagger_Goblin.mp3}}</div>
−
<div style="display: inline-block; padding: 4px; margin-bottom: 4px; background: linear-gradient(to right bottom, #7AF99B,#D6C499,#F38691); border-radius: 16px;">
+
  </div>
−
  <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="flex: 0 0 auto; margin: 0 1rem 1rem 0;">
 +
    <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="position: absolute; bottom: 0;">[[File:CR_Emote_Thumbs-Up_Princess.png|100px]]</div>
 +
    </div>
 +
    </div>
 +
    <div style="text-align: center;">{{AudioButton|CR_Emote_Thumbs-Up_Princess.mp3}}</div>
 +
  </div>
 +
 
 +
  <div style="flex: 0 0 auto; margin: 0 1rem 1rem 0;">
 +
    <div style="padding: 4px; margin-bottom: 4px; background: #fff; border-radius: 16px;">
 +
    <div style="width: 100px; height: 76px; position: relative;">
 +
      <div style="position: absolute; bottom: 0;">[[File:CR_Emote_Rocket_Hoggy.png|100px]]</div>
 +
    </div>
 +
    </div>
 +
    <div style="text-align: center;">{{AudioButton|CR_Emote_Rocket_Hoggy.mp3}}</div>
 +
  </div>
 
   </div>
 
   </div>
 +
</div>
 
</div>
 
</div>
−
|-
+
 
−
| align=center style="width:100px;" |
+
<div style="margin-top: 2rem;">
−
<span class="audio-player">[[Media:CR_Emote_Thumbs-Up_Princess.mp3]]</span>
+
<comments />
−
|}
 
−
|
 
−
{|
 
−
|-
 
−
| align=center style="height: 120px; vertical-align: bottom;" |
 
−
<div style="display: inline-block; padding: 4px; margin-bottom: 4px; background: #fff; border-radius: 16px;">
 
−
  <div style="width: 100px; height: 76px; position: relative;">
 
−
    <div style="position: absolute; bottom: 0;">[[File:CR_Emote_Rocket_Hoggy.png|100px]]</div>
 
−
  </div>
 
 
</div>
 
</div>
−
|-
 
−
| align=center style="width:100px;" |
 
−
<span class="audio-player">[[Media:CR_Emote_Rocket_Hoggy.mp3]]</span>
 
−
|}
 
−
|}
 
−
That's why I put a white square under each Emote. Cuz the background is not transparent.:/[[用户:OrangePig|OrangePig]]（[[用户讨论:OrangePig|讨论]]） 2021年3月20日 (六) 15:26 (CST)
 
−
<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

Rainbow Glow
YOOHOO

CREmoteFixes

This MAY fix most of inconsistent vertical alignment and allow better visual effect.

Info.png
After testing in CR emoticon pages, this fix isn't quite ideal because icons may either have oversized width, or non-transparent background, etc.

您未被允许发表评论。


取自“https://voicewiki.cn/w/index.php?title=用户:UN1C0DE&oldid=26544”