鼠標移上圖標字體，讓其旋轉

效果：容器內放置了一個圖標字體，當鼠標移至容器時，讓圖標字體旋轉角度。

 

一開始使用的是 bootstrap 的圖標字體，它需要添加 2 個類，才能讓圖標正常顯示，通過偽元素 ::before 添加2個類的內容，顯然比較麻煩，所以，換了 icomoon 自己定制的圖標字體，發現還是不行，於是才發現問題出在代碼層面。需要將圖標字體脫離文檔流，無論是定位還是浮動，脫離即可。（目前只實踐出是由於這個問題）

 

實現過程：

1、為容器添加偽元素 ::before ，使其通過  ::before 添加圖標字體 content: "\e114" (偽元素必須添加 content 屬性，否則不會生效)；

2、通過 :hover::before 實現當鼠標移至容器時，對 ::before 所操控的圖標字體進行旋轉角度 transform:rotate(180deg) （旋轉角度值可自定義）；

3、重點：為 ::before 添加定位或浮動；

4、添加 transition: all .5s 只是為了旋轉時有動畫；

 

1、使用 bootstrap 圖標字體：

html:

<p class=""></p>

css:

p {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p::before {
    content: "\e114";
    position: absolute;/* 一開始未設置定位，無法使其旋轉 */
    transition: all .5s;
}

p:hover::before {
    transform: rotate(180deg) scale(.75,.75);
}

 

2、使用定制的 icomoon 圖標字體：

html

<div id=""></div>

css:

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    font-family: 'icomoon';
}

div::before {
    content: "\e91c";
    position: absolute;
    transition: all 0.5s;
}

div:hover::before {
    color: red;
    transform: rotate(180deg);
}

 

以上便是發現問題及解決問題的過程，如有不當，歡迎指正 ！ （*＾-＾*）