コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3 に基づいて、マウスをスライドさせて拡大および強調表示します。effect_html/css_WEB-ITnose

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

WBOY
リリース： 2016-06-24 11:40:44
オリジナル
969 人が閲覧しました

以前 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

関連ラベル：
基于CSS3鼠标滑过放大突出效果
ソース：php.cn
前の記事：CSS位置の相対位置と絶対位置の違いを1枚のpicture_html/css_WEB-ITnoseで理解する 次の記事：font-size 属性には継承_html/css_WEB-ITnose がありますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2289
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2429
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2041
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1926
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1998
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート