鍍金池/ 問答/HTML/ iconfont圖標(biāo)字體如何實現(xiàn)旋轉(zhuǎn)效果？

iconfont圖標(biāo)字體如何實現(xiàn)旋轉(zhuǎn)效果？

iconfont圖標(biāo)字體如何實現(xiàn)旋轉(zhuǎn)效果？

看了網(wǎng)上有人說要加display: inline-block,我加了還是不起作用，求大神解答？

.rotate:before {
font-size: 1rem;
display: inline-block!important;
transform: rotate(135deg);
-ms-transform: rotate(135deg);
/ IE 9 /
-moz-transform: rotate(135deg);
/ Firefox /
-webkit-transform: rotate(135deg);
/ Safari 和 Chrome /
-o-transform: rotate(135deg);
/ Opera /
display: inline-block!important;
}
圖片描述

加載的字體圖標(biāo)出來了，但是沒有旋轉(zhuǎn)效果

回答
編輯回答
喵小咪

transition或keyframe+animation
建議買本書學(xué)習(xí)css

2018年8月16日 17:14
編輯回答
莓森

哥們，你得讓它動起來啊

2017年6月19日 18:45
編輯回答
嫑吢丕

小哥哥，你要給它定義一個動畫啊，比如：

.rotate:before {
  animation: rotate 0.5s infinite;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

詳情看w3school的動畫教程

2017年11月6日 18:56