1

ローディング スピナー (OSX/iOS スタイル) のすべてのティックを表すために、カスタム アイコン フォントで 12 個のグリフを作成しました。

マークアップはこんな感じ

<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;
  }
}

ティックグリフの色をアニメーション化したかったのですが、残念ながらcolorcss 属性はアニメーション化できないようbackgroundで、この場合は役に立たないようです。さらに、キーフレームでアニメーション化する方法が見つかりませんでした。アニメーションはスムーズで、必要なほどエッジが効いていないからです。

これをCSSでアニメーション化する可能性はありますか? 私がする必要があるのは、どういうわけか色を循環させることであり、私は本当にJSを避けたい.

4

3 に答える 3

1

すべての要件を満たしているかどうかはわかりませんが、要素の色を順番に変更しようとしていると言えます。

キーフレームを使用してアニメーションを滑らかではなくエッジの効いたものにしたい場合は、もう少し作業が必要になります。他のステップに非常に近い重複ステップを作成するだけで済みます。

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

}

赤から青へのすべての変化が49％から50％の間であることに注意してください

もちろん、それはあなたが望むステップの数にまで及ぶ可能性があります。すべてのプロパティを2回記述する必要があるということだけです。

また、私が実際に色を変更していることにも注意してください。デモ（Webkitのみ）：

フィドル

新しい答え

何が必要かが明確になったので、最善の解決策は次のとおりです。

1つのdivWebからの例

最後にローテーションを行っていることに注意してください。

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

中間ステップ（円が中間位置にある場合）を非表示にするには、アニメーションを次のステップで実行します。

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

もちろん、これらすべてにベンダープレフィックスが付いています。

于 2013-02-16T08:55:56.360 に答える
1

より良い解決策を見つけました。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-16T10:31:22.293 に答える
0

スピナー アイコンを、隣接するピースから 30 度ごとに一定の距離で 12 回配置する必要があります。次に、最初のピース (12 時の位置) の背景を、アニメーションを開始する 3 番目に暗い色に変更します。アニメーションの設定時間後、3 番目に暗い色を背景として次のピースに移動します。アイコン フォントを提供していただければ、jsfiddle を作成します。

于 2013-02-16T00:09:31.987 に答える