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

H5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方

PHPz
リリース： 2017-04-04 13:42:53
オリジナル
2229 人が閲覧しました

最初に最終的な効果を見てみましょう

H5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方

動的リストバー

1. リストは常にリストであるため、コードは次のとおりです: 

<body>
    <p>
        <ul>
            <li>
                <a>首頁 HOME</a>
            </li>
            <li>
                <a>文章 ARTICLE</a>
            </li>
            <li>
                <a>作品 GITHUB</a>
            </li>
            <li>
                <a>我 ME</a>
            </li>
        </ul>
    </p>
</body>
ログイン後にコピー

表示効果:

H5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方

元の外観

2、次に次のフォントを調整し、前面の小さな黒い点を削除し、背景を別の色に変更します。 

body{
    background-color: #5F5F5F;
}
ul li{
    font-size: 30px;
    list-style:none;  
}
ログイン後にコピー

3. 静止時にぼかし効果を実現するために、ここでは非常に賢い方法が使用されています: シャド​​ウ
ガウスぼかしは必要なく、人間の目の視覚効果を使用するだけです。 

ul li a{
    color: transparent;//字透明
    text-shadow:0 0 5px #fff;//阴影
    letter-spacing: 1px;//字距，为了好看点
}
ログイン後にコピー

H5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方

静止時のぼかしエフェクト

4. スライド時にダイナミックエフェクトを実現するには、<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a>Selector

ul li a:hover{
    color:#fff;
    text-shadow:0 0 1px #fff;
    padding-left: 10px;//移动一下
}
ログイン後にコピー

H5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方

ダイナミックエフェクト

を使用できます。基本的に、プロトタイプは次のように行われます。非常にシンプルですが、とてもうまくいきます。しかし、いつも何かが足りないように感じるので、アニメーションエフェクトを追加して確認します。 

ul li a{
    color: transparent;
    text-shadow:0 0 5px #fff;
    letter-spacing: 1px;
    transition:all 0.4s ease-in-out;
}
ログイン後にコピー

最後にすべてのコードを入力します: JS Bin

さて、最終的な効果はこのようになります。純粋な HTML5 + CSS3 で多くの興味深い機能を実現できるようになりました。私はゆっくりと掘り下げていきます。興味のある友達は一緒に議論しましょう。


以上がH5 特殊効果ブラー ダイナミック リスト バー: 影の素晴らしい使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
阴影的妙用
ソース：php.cn
前の記事：Web フロントエンド面接の質問 8 - 絶対位置と相対位置 次の記事：H5ページの注意事項
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
for ループはランダムに 1 から 0 まで変化します 基本的に、ページが更新されるたびに、for ループは 1 から 0 に変化する可能性があります。なぜこのようなことが起こるのかはわかりませんが、画像を重ね合わせる方法に影響します。...
から 2024-04-06 16:48:14
0
1
393
影付きクローンバージョンでメニューボタンをX字型に変形させるホバーエフェクトを作成します まず初めに、タイトルが紛らわしいことを認めたいと思います。申し訳ありません。私が達成したいのは、ホバー時の次の効果です。私のウェブサイトはここです https://wordpres...
から 2024-04-04 11:55:21
0
2
315
最近クリックした要素にクラスを割り当てる TailwindCSS を使用してスタイル設定された次のようなカレンダーがあります。現在 8 Wednesday をクリックしているため、ピンクの背景とピンクの影が付いています。 ...
から 2024-04-03 16:36:09
0
1
336
非協力的なブール論理 私のウェブサイトで問題が発生しており、少なくとも数週間は修正しようとしていたので、誰かがどこが間違っているかを指摘してくれることを期待していました。背景について説明すると、私は新卒...
から 2024-04-02 13:34:26
0
1
319
特定のカスタム投稿タイプでのみタイトルから投稿スラッグを生成するように WordPress を強制する 以下のコードを使用して、ユーザーが別のスラッグを定義したり、別のスラッグをコピーしたりしても、WordPress に投稿タイトルから投稿スラッグを生成させていますが、これは job...
から 2024-03-31 18:58:26
0
1
275
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！