動畫圖標字體微調器

我已在自定義圖標字體中創建了12個字形來表示加載微調器（OSX/iOS風格）的每個刻度。動畫圖標字體微調器

的標記看起來像這樣

<div class="spinner"> 
    <span class="c1">&#xf001</span> 
    ... 
    <span class="c12">&#xf012</span> 
</div>

這裏的CSS

.spinner { 
    font-family: "nvicons"; 
    font-size: 24px; 
    letter-spacing: -1em; 
    .c1 { 
    color: #eee; 
    } 

    ... 

    .c12 { 
    color: #222; 
    } 
}

現在我想動畫的顏色，如果剔字形，但不幸的是，color CSS屬性似乎不是動畫和background在這種情況下似乎沒有幫助。此外，我沒有找到一種方法來使用關鍵幀進行動畫製作，因爲動畫很流暢，而且不像我需要的那樣前衛。

有沒有可能爲CSS設置動畫效果？我需要做的是以某種方式循環顏色，我真的想避免JS。

來源

2013-02-15 Erik Aigner

找到了更好的解決方案。把它放在一起jsfiddle

.spinner { 
    position: relative; 
    font-family:"nvicons"; 
    font-size: 24px; 
    letter-spacing: -1em; 
    color: #eee; 
    text-rendering: optimizeSpeed; 
} 
.spinner > span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    -webkit-animation: coloring 1s linear infinite; 
} 
.spinner .e1 { 
    -webkit-animation-delay: 0.0s; 
} 
.spinner .e2 { 
    -webkit-animation-delay: 0.08333s; 
} 
.spinner .e3 { 
    -webkit-animation-delay: 0.16667s; 
} 
.spinner .e4 { 
    -webkit-animation-delay: 0.25s; 
} 
.spinner .e5 { 
    -webkit-animation-delay: 0.33333s; 
} 
.spinner .e6 { 
    -webkit-animation-delay: 0.41667s; 
} 
.spinner .e7 { 
    -webkit-animation-delay: 0.5s; 
} 
.spinner .e8 { 
    -webkit-animation-delay: 0.58333s; 
} 
.spinner .e9 { 
    -webkit-animation-delay: 0.66667s; 
} 
.spinner .e10 { 
    -webkit-animation-delay: 0.75s; 
} 
.spinner .e11 { 
    -webkit-animation-delay: 0.83333s; 
} 
.spinner .e12 { 
    -webkit-animation-delay: 0.91667s; 
} 
@-webkit-keyframes coloring { 
    from { 
     color: #222; 
    } 
    to { 
     color: #eee; 
    } 
}

來源

2013-02-16 10:31:22

你應該做的就是將你的微調器圖標放置在一個固定的距離上，每隔30度與其相鄰的部件相距一定距離。然後將第一部分的背景（12點）更改爲您想要開始動畫的第3個最暗的顏色。然後，在動畫設置的一段時間後，將第3個最暗的顏色作爲背景移動到下一個作品。如果你能給我提供你的圖標字體，我會讓你成爲一個jsfiddle。

來源

2013-02-16 00:09:31

沒有標記/ css我不明白你的答案。您可以假設預先旋轉的刻度是unicode值'f001'到'f012'。 – 2013-02-16 00:38:05

你的答案正是我所說的......而且這很棒，很好的工作！ – 2013-02-16 15:37:52

應該有發佈的代碼;） – 2013-02-16 16:29:43

我很確定如果我得到所有要求，但我會說你試圖改變序列中元素的顏色。

當你說你想讓動畫變得前衛而不流暢時，可以用關鍵幀完成，它只是給你一點工作。你只需要創建重複步驟非常接近其他：

@-webkit-keyframes colors { 
    0% {color: red;} 
    49% {color: red;} 
    50% {color: blue;} 
    100% {color: blue;}

}

通知，所有從紅到藍的變化爲49％和50％

當然

之間，可以廣泛的步驟，你想要的數量;只有你需要陳述每個屬性兩次。

也注意到我的確在改變顏色。演示（僅適用於WebKit的）：

fiddle

新的答案

現在很清楚你想要什麼，最好的解決辦法是說一句：

example from one div web

通知最後你正在做一個輪換：

@-keyframes ajax-loader-rotate { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

和隱藏的中間步驟（其中圓圈是在中間位置）的動畫是通過步驟來完成：

animation: .85s ajax-loader-rotate steps(8) infinite;

當然

這一切與供應商前綴。

來源

2013-02-16 08:55:56 vals

動畫圖標字體微調器

回答

相關問題