3

アニメーションとして反時計回りに画像を表示したいですか? より正確には、星からある種のストロークを明らかにして、それが描かれているという印象を与えたい. そして、それはすべて CSS3 だけです。出来ますか？

4

2 に答える 2

2

この方法は、CSS3 + いくつかの CSS3 アニメーションで円グラフを作成する方法に関する Kyle J Larson の投稿に基づいています。

デモ(コード ビュー)

<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRnxxoXUA200QV3f8ERe_3wM40HdwUUhx-Gyvh6Lurs27DcxksSWoUnsMfP" />
<div class="outer"><div class="inner"></div></div>
<div class="outer2"><div class="inner2"></div></div>​

CSS:

img {position:absolute;top:33px;left:32px;}
.outer {
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(255, 0, 0, .5);
    background:transparent;
    clip: rect(0, 150px, 300px, 0);
    /*clip: initial;*/
}

.inner {
    position:absolute;
    background:rgba(0, 255, 0, .5);
    background:#fff;
    width:300px;
    height:300px;
    clip: rect(0, 300px, 300px, 150px);
    /*clip: initial;*/
    -webkit-transform:rotate(-180deg);
    border-radius:150px;
    -webkit-animation:innerAnim 3s 1 linear forwards;
}
.outer2 {
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(127, 127, 0, .5);
    background:transparent;
    -webkit-transform:rotate(-180deg);
    clip: rect(0, 150px, 300px, 0);
    /*clip: initial;*/
}

.inner2 {
    position:absolute;
    background:rgba(0, 0, 255, .5);
    background:#fff;
    width:300px;
    height:300px;
    clip: rect(0, 300px, 300px, 150px);
    /*clip: initial;*/
    -webkit-transform:rotate(180deg);
    border-radius:150px;
    -webkit-animation:innerAnim2 3s 1 linear forwards 3s;
}

@-webkit-keyframes innerAnim {
    from {
        -webkit-transform:rotate(-180deg);
    }
    to {
        -webkit-transform:rotate(0deg);
    }
}

@-webkit-keyframes innerAnim2 {
    from {
        -webkit-transform:rotate(180deg);
    }
    to {
        -webkit-transform:rotate(0deg);
    }
}
​

注:backgroundクラスごとに 2 つのスタイルがあります。2 番目を削除して、アニメーションがどのように機能するかをよりよく理解してください。

CSS からスターを作成することもできます (参照: http://3easy.org/buildmobile/jquerymobile/#star )

編集: jsfiddle にベンダー プレフィックスを追加しました

于 2012-12-20T22:58:11.240 に答える
1

私が考えることができる唯一のことは、キーフレームとアニメーション プロパティを使用することです。

これを使用すると、たくさんのエリアまたは div タグを含む div 内に画像を配置することで、画像を隠すことができます。次に、アニメーションを使用して、画像を「フェード」divsまたはareasアウトして表示できます。画像を隠している要素の配置と密度を正しく取得すると、画像が描画されているように見える可能性があります。

これは、星の画像を隠すために4 つの div を使用する非常に初歩的な例です。より多くの div を作成し、それらを星の上により密に配置すると、それらを簡単に表示できます。

これはおそらくより少ない CSS で実行できますが、これは単純な例にすぎません。

于 2012-12-20T21:43:26.673 に答える