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



语音维基

“用户:UN1C0DE”的版本间的差异

 
(未显示2个用户的59个中间版本)
第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>
 +
<h2>Some effects</h2>
 +
 
 +
<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>
 +
 
 +
  <div style="display: flex; justify-content: center; margin: 0 2rem;">
 +
  <div class="rainbow-glow--wrapper">
 +
    <div class="rainbow-glow--gradient"></div>
 +
    <div class="rainbow-glow--content">YOOHOO</div>
 +
  </div>
 +
  </div>
 +
 
 +
  <div>
 +
  </div>
 +
</div>
 +
</div>
 +
 
 +
<div>
 +
<h2>CREmoteFixes</h2>
 +
 
 +
<div>
 +
  <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;
 +
    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 style="display: flex; margin: 0 -1rem -1rem 0;">
 +
  <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_Dagger_Goblin.png|100px]]</div>
 +
    </div>
 +
    </div>
 +
    <div style="text-align: center;">{{AudioButton|CR_Emote_Dagger_Goblin.mp3}}</div>
 +
  </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 style="text-align: center;">
+
<div style="margin-top: 2rem;">
  <p style="
+
<comments />
    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>
 
</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

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.

您未被允许发表评论。