CSS3 に基づいて、マウスをスライドさせて拡大および強調表示します。effect_html/css_WEB-ITnose

以前 CSS3 画像ホバー拡大効果を共有したことを今でも覚えていますが、その効果は非常に優れています。今日は、同様の CSS のマウスオーバーによる拡大とハイライト効果を共有します。ただし、以前の効果は画像であり、今回はカラー ブロックである点が異なります。実際、CSS の原則をマスターすれば、どの Web 要素でもこれを実現できます。 CSS3 アニメーションの特殊効果を強調表示したり拡大したりするものです。レンダリングは次のとおりです:

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

実装コード。

html コード:

 <div class="container">        <ul class="evenflow sample_1">            <li class="evenflow_scale">                <a href="#" target="_blank">                    <img src="img/1.png">                </a>            </li>            <li class="evenflow_scale">                <a href="#" target="_blank">                    <img src="img/2.png">                </a>            </li>            <li class="evenflow_scale">                <a href="#" target="_blank">                    <img src="img/3.png">                </a>            </li>            <li class="evenflow_scale">                <a href="#" target="_blank">                    <img src="img/4.png">                </a>            </li>            <li class="evenflow_scale">                <a href="#" target="_blank">                    <img src="img/5.png">                </a>            </li>            <li class="evenflow_scale">                <a href="#" target="_blank">                    <img src="img/6.png">                </a>            </li>        </ul>    </div>

via: http://www.w2bc.com/article/49705