画像マスク用の 12 のクールな CSS3 マウスオーバー アニメーション効果layers_html/css_WEB-ITnose

InContent は、マウスが画像マスク レイヤー上をスライドするときの非常にクールな CSS3 アニメーション効果です。この特殊効果セットには、合計 12 種類の異なるマウスオーバー画像効果があり、スライド、回転、反転の 3 つのカテゴリに分類されます。 CSS3 トランジションとトランスフォーム プロパティをサポートする最新のブラウザーでは正常に動作します。

オンラインプレビュー ソースコードのダウンロード

使い方

この CSS3 マウスを使用してイメージマスクレイヤーアニメーション効果の上をスライドするには、SASS によってコンパイルされた sass-compiled.css ファイル、またはあまりコンパイルされていないコンパイルされたファイルを導入する必要がありますLESS によってページに追加されます。

<link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />或者：<link rel="stylesheet" href="css/less-compiled.css" type="text/css" />        

HTML 構造

画像マスク レイヤーの CSS3 マウスオーバー アニメーション効果の基本的な HTML 構造は次のとおりです:

<div class="pic">    <img src="img/01.jpg" class="pic-image" alt="Pic"/>    <span class="pic-caption bottom-to-top">        <h1 class="pic-title">Pic Title</h1>        <p>图片描述文本</p>    </span></div>        

.bottom-to-top はマスク レイヤーのアニメーション効果クラスです。

利用可能なアニメーション効果

CSS3 マウスがイメージマスクレイヤー上をスライドするアニメーション効果 利用可能な CSS3 アニメーション効果は次の 12 種類です。