[Plurk] 讓你的plurk大頭貼旋轉吧!

2013-06-01

2261
0
CSS

ps.IE9及之前的版本不支援animation的功能...所以在IE下看不到這效果...聽說IE10有支援...

使用方式 :

將下面的CSS 設定貼到Plurk的自訂佈景風格中

.profile-pic{
border-radius:50%;
-webkit-border-radius:50%;
animation: profileRotate 2s linear infinite;
-webkit-animation: profileRotate 2s linear infinite;
}

@keyframes profileRotate
{
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}

@-webkit-keyframes profileRotate /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

demo : http://www.plurk.com/ajunlee

基本上就是使用CSS3裡animation的keyframes跟rotate的功能,

所以你也可以改成其他的動態效果.

回首頁