玩模板》让部落格肖像动起来

为了让自己的部落格网页能活泼、生动、有趣，以前会以 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 动画机制，不只可以让肖像动起来，部落格模板里的所有物件区块也都可以动起来，再来就是多多发挥您的巧思与创意了！