• 简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
    ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

    CSS を使用してマウス クリック効果を実装する_CSS/HTML

    WBOY
    リリース： 2016-05-16 12:11:19
    オリジナル
    1852 人が閲覧しました

    CSSを上手に適用できればホームページは美しく見えます。以下にCSSで作成したマウスクリックの特殊効果画像を紹介します。

    1. 次のコードをホームページ内とホームページ間でコピーします。

    .shadow {
    フィルター: シャドウ(色=青、方向=225)
    }
    .shadow1 {
    フィルター: シャドウ(色=赤、方向=225)
    }
    .shadow2 {
    FILTER:shadow(color=green,direction=225)
    }
    .div {
    CURSOR:move(add=ture,direction; =135、強度=10); 幅: 800px
    }

    ここではぼかしフィルターが適用されます。

    2. ページに画像を挿入します。たとえば、CSS を使用してマウス クリック効果を実装する_CSS/HTML を追加します。

    挿入した画像の下の行に

    を追加します。

    3. 画像の属性を設定した後、JavaScript スクリプト コードを適用する必要があります。つまり、画像に特殊効果を付けてマウスの動きを追従させる必要があります。コードは次のとおりです。



    このようにして、よりパーソナライズされた画像効果を設定できます

    前の記事：スペースページのCSS説明_CSS/HTML 次の記事：ブラウザから CSS_CSS/HTML を非表示にする
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    2
    1733
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    10
    1889
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1601
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1512
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1549
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！