1

CSSに使用される光の効果のように見える効果を作成する方法があるかどうか誰かが知っていiPhone appsますか? ボックスの上部の明るい部分を意味します。

ありがとう、

ロン

ここに画像の説明を入力

4

2 に答える 2

1

残念ながら、要素:afterで:beforeセレクターを使用することは仕様でカバーされていないため、純粋な CSS ソリューションは正しく動作しない可能性があります。img

この仕様は、:before および :after と置き換えられた要素 (HTML の IMG など) との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義されます。

imgChrome と Firefox の現在のバージョンでは、これらのセレクターは無視されているように見え、単に要素に対して機能しません。

CSS がサポートされていない場合にレンダリングしないようにフォールバックする小さな HTML ラッパーを使用したソリューションを次に示します。ここでコンテナーのサイズを指定する必要がありますが、これは JavaScript で簡単に設定できます。

CSS

.shine {
    width:223px;
    height:223px;
    position:relative;
    overflow:hidden;
    display:inline-block;
}

.shine:after {
    width:150%;
    height:100%;
    position:absolute;
    top:-45%;
    left:-25%;
    display:block;
    content:"";
    background:rgba(255,255,255,0.1);
    border-radius:100%;
}

HTML

<span class="shine">
    <img src="" alt="">
</span>

結果

これを少し凝ったものにするために、 にグラデーションの背景を追加することもできますが.shine:after、アイデアを実演しなくても問題なく機能します。

ここに jsFiddleがあるので、私の言葉を鵜呑みにする必要はありません。

CSS 輝き効果

于 2012-10-21T09:56:57.710 に答える
1

私はあなたが説明した効果を見たことがありません (iPhone を使用することはありません) が、何らかの形でアニメーション化されていると思いますか? 次に、2 つの画像を使用して「ホバー時に」それらをブレンドする場合は、css でそれを行うことができます。「ライトアイコン」をプレーンアイコンの上に配置し（通常、css の:after疑似セレクターを使用）、css:hoverセレクターを使用して不透明度の値を制御します）。

于 2012-10-21T09:27:39.013 に答える