1. 程式人生 > >html 發光字型和 淡入淡出效果

html 發光字型和 淡入淡出效果

css檔案內容

.Flex-color-Special
 {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #00c0ef,
               0 0 70px  #00c0ef,
               0 0 80px  #00c0ef,
               0 0 100px #00c0ef,
               0 0 150px #00c0ef;
  }

 
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始狀態 透明度為0*/
}
50% {
opacity: 0.5; /*中間狀態 透明度為0*/
}
100% {
opacity: 1; /*結尾狀態 透明度為1*/
}
}

.Flex-fadeIn
{-webkit-animation-name: fadeIn; /*動畫名稱*/
-webkit-animation-duration: 8s; /*動畫持續時間*/
-webkit-animation-iteration-count: infinite; /*動畫次數 infinite 為無限 否則就是具體次數*/
-webkit-animation-delay: 0s; /*延遲時間*/}
html程式碼      
      <span   class="margin Flex-color-Special Flex-fadeIn"> 中華人民共和國</span>