2

CSS を使用してロック アイコンを (ロック状態で) 表示し、ホバー時にロック解除状態にアニメーション化することはできますか (以下を参照)。

ここに画像の説明を入力

4

3 に答える 3

1

CSSキーフレームを組み込んだSVGスプライトシートを試すことができます。

svgアニメーションのすべてのフレームの SVG ファイルを作成し、目的の要素 (この場合はアンカー要素です。クラス名で注釈を付けましょう) の背景として使用します。

a.svg {
    background-image: url(lock.svg);
}

SVG 画像の縦横比も考慮する必要があるため、次のように設定します。

a.svg {
    width: 1200%;
    height: 100%;
}

これをクリッピング コンテナーでラップして余分な幅をすべて非表示にする必要があるため、別の要素内に配置し、絶対寸法を付けて、そのoverflowプロパティをhiddenに設定します。たとえば、次のようにします。

<div class="clip">
    <a class="svg" href="#"></a>
</div>

.clip {
    overflow: hidden;
    width: 50px;
    height: 50px;
}

次に、使用するキーフレーム変換を宣言します。ここでは X 軸に沿って移動しているだけなので、次のようになります。

@-webkit-keyframes lock {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(-100%, 0, 0); }
}

そして、SVG スプライト シートにあるフレームの数に応じて段階的に使用します。

a.svg {
    -webkit-animation: lock 1s steps(12, end);
}

待って！hover でアニメーションをアクティブにする必要があるため、ここで一歩戻りましょう (しゃれは意図していません) 。状態の CSS トランジションでそれを行い:hoverます。さて、最後のルールを削除して、代わりに次のことを行います。

a.svg {
    -webkit-transition: -webkit-animation;
}
a.svg:hover {
    -webkit-animation: lock 1s steps(12, end);
}

ノート

  • これはすべて、このテクニックを紹介するVeljko Sekelj の壮大な投稿から恥知らずに借用したものです。
  • Webkit 駆動型ブラウザーでのテストにより、プロパティはすべて Webkit 指向です。これはおそらく Gecko でも実現できます。
  • これは、ベクター グラフィックスを扱っているため、任意のコンテナー サイズで機能し、背景キャリアはフレックス レイアウトであり、そのコンテナーの寸法に適合します。
  • lockedとunlockedの間で状態を切り替える必要があるため、まだいくつかの作業が必要です。これについては (まだ) ここでは説明しません。アニメーションを逆に実行できると思います。

すぐにこの投稿を更新して、実際に動作するデモを含めますが、これにより、探しているものに有利なスタートを切ることができます. さあ、Veljko Sekelj の投稿を読んで、コードをいじって、ひねって、回して、狂ってください。

于 2013-07-25T00:57:45.930 に答える
0

魔女のCSSアニメーション、あなたはできませんが、私のトリックを見てください：

:hoverたとえば、背景画像を変更できます。

a {
    background: url(lock.png) no-repeat center center;
}
a:hover {
    background-image: url(unlock.gif);
}

unlock.gif はアニメーション gif ファイルであり、ロックから開始して画像のロックを解除します。

于 2013-07-25T00:25:20.660 に答える