為了讓自己的部落格網頁能活潑、生動、有趣，以前會以 Flash 動畫來點綴一番，現在以 CSS 動畫來微裝飾。

建立肖像動畫，模板設定必須選擇完全自定模式，在 CSS 裡添加下面的碼既可囉～

/**

 * 我的肖像動畫

 */

.sidebar-bg tr:nth-child(1) a.nav img, /* 舊版 */

#profile_body img {

	-webkit-animation: rotate-center 0.6s infinite;

	animation: rotate-center 0.6s infinite;

}



@-webkit-keyframes rotate-center {

	0% {

		-webkit-transform: rotate(0);

		transform: rotate(0);

	}

	100% {

		-webkit-transform: rotate(360deg);

		transform: rotate(360deg);

	}

}



@keyframes rotate-center {

	0% {

		-webkit-transform: rotate(0);

		transform: rotate(0);

	}

	100% {

		-webkit-transform: rotate(360deg);

		transform: rotate(360deg);

	}

}

使用 CSS 動畫機制，不只可以讓肖像動起來，部落格模板裡的所有物件區塊也都可以動起來，再來就是多多發揮您的巧思與創意了！