使用CSS動畫功能在你的文章中放置動態按鈕 @ 資訊生活雜記

　　許多人都知道使用CSS可以讓自己的文章或網站的排版更漂亮，但是可曾想過，其實，現在CSS3也有支援動畫製作的能力了，也就是說，我們只要使用CSS，不需要任何其它的程式語言（當然Javascript也不需要），就可以做出一些簡單的動態效果，像是下面這個按鈕就是其中的一個例子：

按這裡前往何博士的資訊天地

　　如果你沒有看到效果，那就表示你的瀏覽器版本太舊了，趕快去更新呦。最新的Chrome和FireFox瀏覽器都有支援CSS3的動態效果指令。接下來，站長就來教大家如何在痞客邦的文章中建立這樣的按鈕。

　　就像是我們在前一篇文章中提到的，【在痞客邦中使用CSS類別選擇器，讓你的文章排版更漂亮也更方便】，在這裡我們也是要建立一個動態按鈕的類別，而且是放在自訂樣式表的最下方，先建立一個動態按鈕的類別.dynamicbtn，除了指定文字大小以及顯示的方式之外，我們也使用animation這個指令讓瀏覽器去找一個叫做scalebtn的程序來做動態效果，如下所示：

.dynamicbtn {
font-size:18px;
display:inline-block;
border: 1px solid black;
padding:5px;
margin:20px;
margin-left:40px;
background:#ffffec;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
opacity: 0.2;
-webkit-animation: scalebtn 2s infinite alternate;
-moz-animation: scalebtn 2s infinite alternate;
-ms-animation: scalebtn 2s infinite alternate;
-o-animation: scalebtn 2s infinite alternate;
animation: scalebtn 2s infinite alternate;
}

　　下面這個CSS指令則是為了要建立當滑鼠移到按鈕之上的一個背景顏色的動態效果：

.dynamicbtn:hover.dynamicbtn {
background:#ccccff;
cursor: pointer;
}

　　下面這一段則是設定動態效果內容的程序，主要是指定要執行動態效果時，一開始(0%)和執行到最後(100%)時的樣子，讓瀏覽器可以自行在上面做平順地變化。

@keyframes scalebtn {
0% {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
opacity: 0.2;
}
100% {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 1;
}
}