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



语音维基

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

 
(未显示同一用户的18个中间版本)
第62行: 第62行:
 
}
 
}
  
.rainbow-glow--glow {
+
.rainbow-glow--gradient {
  position: absolute;  
+
overflow: hidden;
  left: 0;  
+
  position: absolute;
  top: 0;  
+
  left: 0;
  width: 100%;  
+
  top: 0;
  height: 100%;  
+
  width: 100%;
  border-radius: 8px;   
+
  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);  
 
  background-image: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);  
 
  box-sizing: border-box;
 
  box-sizing: border-box;
 +
animation: rotate 2s infinite linear;
 +
}
 +
 +
@keyframes rotate {
 +
0% {
 +
  transform: rotate(0);
 +
}
 +
 +
100% {
 +
  transform: rotate(1turn);
 +
}
 
}
 
}
  
第95行: 第119行:
 
  <h2>Some effects</h2>
 
  <h2>Some effects</h2>
  
  <div style="width: 100%; display: grid; grid-template-columns: 1fr 1fr auto;">
+
  <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 class="rainbow-glow--glow">&nbsp;</div>
+
     <div class="rainbow-glow--gradient"></div>
 
     <div class="rainbow-glow--content">YOOHOO</div>
 
     <div class="rainbow-glow--content">YOOHOO</div>
 
   </div>
 
   </div>
第106行: 第130行:
 
    
 
    
 
   <div>
 
   <div>
  <ul>
 
    <li>The <code>filter</code> property will eliminate inline styles (wish I could use this on the glow layer though)</li>
 
  </ul>
 
 
   </div>
 
   </div>
 
  </div>
 
  </div>
第117行: 第138行:
  
 
  <div>
 
  <div>
   <p>This may fix most of inconsistent vertical alignment and allow better visual effect.</p>
+
   <p>This '''MAY''' fix most of inconsistent vertical alignment and allow better visual effect.</p>
  
 
   <div  
 
   <div  
第129行: 第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>
    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; height: 120px;">
+
   <div style="flex: 0 0 auto; margin: 0 1rem 1rem 0;">
     <div style="display: inline-block; padding: 4px; margin-bottom: 4px; background: linear-gradient(to right bottom, #7AF99B,#D6C499,#F38691); border-radius: 16px;">
+
     <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; height: 120px;">
+
   <div style="flex: 0 0 auto; margin: 0 1rem 1rem 0;">
     <div style="display: inline-block; padding: 4px; margin-bottom: 4px; background: linear-gradient(to right bottom, #7AF99B,#D6C499,#F38691); border-radius: 16px;">
+
     <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; height: 120px;">
+
   <div style="flex: 0 0 auto; margin: 0 1rem 1rem 0;">
     <div style="display: inline-block; padding: 4px; margin-bottom: 4px; background: #fff; border-radius: 16px;">
+
     <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

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.

您未被允许发表评论。