私は自分のウェブサイトに 3 つの異なる円を作ろうとしています。グラフィック/画像ファイルとして挿入したくありません。だから私はCSS3を使ってそれを達成しようとしてきましたが、実際に指を動かすことはできません.
それはどのように見えるでしょうか？ 私が達成しようとしているものの写真をwww.sp34k.com/etc/circles.jpg にアップロードしました。これを達成するために使用しようとしているコードを実際に示すことはできません。奇妙で何も正確に浮かびません。
試し たこと 絶対位置で円を3つ作って、%(パーセンテージ)で色の部分の幅を決めてみたのですが、どうやって設定すればいいのか頭が混乱してしまいます。
どんな提案でも大歓迎です、マイク
これは、あなたが望む効果を達成するための私の簡単な試みです:
JavaScript やキーフレームで簡単にアニメーション化できます。任意のコンテンツはinnerdiv に入ります。パーセンテージを変更するには、疑似要素の角度を調整するだけです。
もう少し努力すれば、これは簡単に洗練できると思います;）
注: 変換には webkit-prefix があるため、chrome/safari でのみ機能します。Firefox または他のブラウザーで表示するには、プレフィックスを変更する必要があります。
PS 仕事から帰ったらアニメ化します。
Christophによる良いものです が、ブラウザがレンダリングする前に CSS に変換する必要があるため、通常の CSS よりも比較的遅い SASS/SCSS を使用しています。
