2018-04-21 00:18:44
felita66
ヽ(`∀´)ノ過年。
發言  

【選項】 會發光閃爍的動態按紐 / 遊戲樣式分享版 好主題 : 5

  
  好像沒看到動畫的分享
  寫了一個分享給大家
  (不知為何動態的按鈕有點噁? :目
    
  CSS語法:
  ========按鈕樣式========================
  .option-btn,.nametag{ 
  background:linear-gradient(90deg,#222,#444,#222);
   width: 7vw;
   height: 7vh;
  color:#fff;
  border-radius:3.5vh;
   box-shadow: inset 0px 0px 10px 1px rgba(117,182,255,0.4), 0px 0px 20px rgba(117,182,255,0.1);
  animation:gogoloader  3s  alternate infinite;
  }
  ============按鈕被滑鼠滑過樣式=============================
  .option-btn:hover {
   -webkit-animation: pulse 1s alternate infinite;
    -moz-animation: pulse 1s alternate infinite;
  color:#222;
  }
  =============按下按鈕後樣式==================================
  .option-btn:active {
   background-color:#eee;
  color:#222;
  }
  ==============閃爍動畫==================================
  @-webkit-keyframes pulse {
    0% {
      background: rgba(255,255,255,1);
      box-shadow: inset 0px 0px 10px 2px rgba(117,182,255,0.5),
                        0px 0px 40px 2px rgba(105,135,255,1);
    }
    100% {
      background: rgba(255,255,255,0);
      box-shadow: inset 0px 0px 10px 2px rgba(117,182,255,0.5),
                        0px 0px 30px 2px rgba(105,135,255,0.3);
    }
  }
    
  @-moz-keyframes pulse {
    0% {
      background: rgba(255,255,255,1);
      box-shadow: inset 0px 0px 10px 2px rgba(117,182,255,0.5),
                        0px 0px 40px 2px rgba(105,135,255,1);
    }
    100% {
      background: rgba(255,255,255,0);
      box-shadow: inset 0px 0px 10px 2px rgba(117,182,255,0.5),
                        0px 0px 30px 2px rgba(105,135,255,0.3);
    }
  }
  ====================放大縮小動畫================================
  @keyframes gogoloader {
     0% {-webkit-transform: scale(1);}
    50% {opacity: 0.8;
  -webkit-transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
      opacity:1;
    }
  }
  @-webkit-keyframes gogoloader {
    0% {-webkit-transform: scale(1);}
    50% {opacity: 0.8;
  -webkit-transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
      opacity:1;
    }
  }
  =================其他設置===============================
  .app-bar, .app-bar-bottom{
  background: -webkit-linear-gradient(#313131, #222); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#31131, #222); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#313131, #222); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#313131, #222); /* Standard syntax */
  }
  .c3 {
  visibility:hidden;
  display:none;
  }
  .c2 > center, .c1 > center{
  visibility:hidden;
  display:none;
  }
  .container2 > center{
  visibility:hidden;
  display:none;
  }
  #control > center{
  visibility:hidden;
  display:none;
  }
  .site{
  width:95%;}
  .content-game-cover-ad{
  display:none;
  }

select * from pps_article where topic_id='1223704028' order by date desc limit -6, 6 ;DB Error, could not query the database MySQL Error: