牆壁彩繪 / Lin.mo 里莫彩繪事務所 , 藝術設計,

一般我們在html 的連結 hover 變化不外乎就是單純變色或是變淡,

上次遇到一位客戶他想要做成滑鼠移過去時會有多色的變化,

這個做法也非常簡單在此分享作法！

首先這是一個html連結標籤 <a href="#" id="hover-a">文字特效</a>

這是基本的ＣＳＳ
<style>
  ＃hover-a {
    color: #333;
  }
  ＃hover-a:hover {
    color: #red;
  }
</style>

基本的效果就是這樣

文字特效

加了動態的效果就是這樣

文字特效

這個做法非常容易 在hover時加上關鍵影格即可

<style>
  #hover-a-2 {
    font-size: 30px;
    display: block;
    color: #333;
  }
  #hover-a-2:hover {
    animation: hover 1s infinite steps(1);
   // 宣導動畫屬性依序為
   // hover (自定義名稱) 1s 播放速度  infinite 重複播放  steps(1) 以每次只走一個影格的模式
  }
  @keyframes hover {
    0% {color: #fadf06}
    25% {color: #7d9bc0}
    50% {color: #a3cf5f}
    75% {color: #eee}
    100% {color: #7d9bc0}
  }
</style>

<a href="#" id="hover-a-2">文字特效</a>

以上是一個小特效的分享！

里莫彩繪事務所紛絲團

奈思創藝網頁設計

奈思創藝網頁設計紛絲團