查看“模板:公众号导航”的源代码

<includeonly>
<div class="nav-layout">
       <div class="line-animation">
       <div class="nav-container">
          <div class="nav-brand"><a href="https://wiki.biligame.com/lysk/玩家/公众号">公众号</a></div>
          <div class="nav-items">
            <ul class="nav-list">
              <li class="nav-item">
                [[file:公众号头像-Planet Lab.png|link=玩家/公众号/Planet Lab]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-诡语人.png|link=玩家/公众号/诡语人]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-吃喝玩乐在临空.png|link=玩家/公众号/吃喝玩乐在临空]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-影视前线资讯站.png|link=玩家/公众号/影视前线资讯站]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-Twinkle潮玩社.png|link=玩家/公众号/Twinkle潮玩社]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-深空时代.png|link=玩家/公众号/深空时代]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-猎人百事通.png|link=玩家/公众号/猎人百事通]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-Akso医院小助手.png|link=玩家/公众号/Akso医院小助手]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-猎人协会 医疗保障部.png|link=玩家/公众号/猎人协会-医疗保障部]]
              </li>
              <li class="nav-item">
                [[file:公众号头像-利兹拍卖行.png|link=玩家/公众号/利兹拍卖行]]
              </li>
            </ul>
         </div>
   </div>
</div>
</div>

{{#if:{{#var:公众号模板css}}||{{#vardefine:公众号模板css|1}}
<bstyle>/*<pre>*/
  .nav-layout {
    width: 100%; 
  }

  .line-animation{
   position: relative; 
   width: 100%; 
  }

  .line-animation::before{
    content: "";
    position: absolute; 
    bottom: 0;
    left: 0; 
    width: 0; 
    height: 3px;
    background-color: white; 
    animation: moveLine 4s infinite; 
  } 

  .line-animation::after{
    content: "";
    position: absolute; 
    top: 0;
    left: 0; 
    width: 0; 
    height: 3px;
    background-color: white; 
    animation: moveLine 4s infinite reverse; 
  } 

  @keyframes moveLine {
    0% {
      left: 0; 
      right: 0;
    }
    50% {
      left: 0; 
      width: 100%; 
    }
    100% {
      left: 100%; 
      width: 0; 
    }
  }

  .nav-container{
    position: relative; 
    padding: 5px 0; 
    display:flex;
    flex-wrap: wrap !important;
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1)); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
    border-left: none; 
    border-right: none;
  }

  .nav-container::after{
    content: ""; 
    position: absolute; 
    top: 10px;  
    width: 100%; 
    height: 100%; 
    background:linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1));    
    z-index: -1; 
    border-radius: inherit; 
    box-sizing: border-box;
    box-shadow: -10px 9px 6px rgba(0,0,0,0.1);
  }

  .nav-brand {
   overflow: hidden; 
   width: 100%; 
   height: 100%;  
  }

  .nav-brand a{
   color: transparent;
   width: 100%; 
   height: 100%;
   text-decoration: none !important; 
  }

  .nav-brand a:hover{
    cursor: pointer !important;
  }
  
  .nav-layout .nav-container .nav-brand{
    position: relative; 
    flex: 0 0 10%;   
    color: transparent; 
    text-align: center; 
    font-size: 3.6rem; 
    background: url('https://patchwiki.biligame.com/images/lysk/3/39/c9mmv1qk02ganxee7e0a9cxihkvnbp1.png');
    background-position: center;
    background-size: 110% 110%;
    -webkit-background-clip: text; 
    background-clip: text;
  }

  .nav-layout .nav-container .nav-brand::after{
    content:"公众号";
    position: absolute; 
    top:65%; 
    right: 4.2%; 
    color: transparent;
    background: url('https://patchwiki.biligame.com/images/lysk/3/39/c9mmv1qk02ganxee7e0a9cxihkvnbp1.png');
    background-position: center;
    background-size: 100% 100%;
    -webkit-background-clip: text; 
    background-clip: text; 
    transform: scaleY(-1); 
    opacity: 0.7;
    filter: blur(0.5px); 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .nav-layout .nav-container .nav-items{
    flex: 0 0 90%; 
  }

  .nav-item {
    flex: 0 0 10%;
  }

  .nav-item img{
   width: 80px; 
   height: 80px;
   border-radius: 50%;
   object-fit: cover !important; 
  }

  .nav-item img:hover{
   cursor: pointer; 
  }

  .nav-layout ul {
    list-style: none; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: flex-start;    
    padding-left: 10px;
    margin: 0; 
  }


@media (max-width: 1200px){
  .nav-layout .nav-container .nav-brand{
    font-size: 2.8rem; 
  }

  .nav-item img{
    width: 70px; 
    height: 70px; 
  }
  }

@media (max-width: 991px){

  .nav-layout .nav-container .nav-brand{
    flex: 0 0 15%;   
    font-size: 2.8rem; 
  }

  .nav-layout .nav-container .nav-brand::after{
    right: 11.2% !important; 
    filter: blur(0.2px)
  }

   .nav-item img{
    width: 70px; 
    height: 70px; 
  }

  .nav-layout .nav-container .nav-items{
    flex: 0 0 85%; 
  }

  .nav-item {
    flex: 0 0 20%;
  }

}
@media (max-width: 590px){
  .nav-layout .nav-container .nav-brand{
    flex: 0 0 20%;   
    padding: 10px; 
    margin: 10px; 
    font-size: 2.8rem; 
  }
  
  .nav-container{
   flex-direction: column; 
  }
  
  .nav-layout .nav-container .nav-brand::after{
    right: 39.2% !important; 
    filter: blur(0.2px)
  }
  .nav-layout .nav-container .nav-items{
    flex: 0 0 80%; 
  }

  .nav-item {
    flex: 0 0 25%;
  }

}
/*</pre>*/</bstyle>
}}

</includeonly>

<noinclude>

'''<big>🌸🌸公众号底部模板</big>'''


1. 复制以下模板即可使用：
<pre>{{公众号导航}}</pre>

2. 如需添加新的公众号的情况下，在<pre><ul>....</ul></pre>里加一段以下代码，去掉括号并且把括号内的信息改成新公众号对应信息：
<pre>
<li class="nav-item">
[[file:（新公众号头像文件名）.png|link=玩家/公众号/（新公众号）]]
</li>
</pre>
------------------------------------------------------------------------------------------------------------------------


'''<big>🌸🌸实际例子</big>'''


'''例子'''
{{公众号导航}}

</noinclude>