HTML/CSS]Blurアニメーションの実装

12022 ワード
CSS html テキストリンク

緒論


Webページを構築するときに、マウスを動かさない要素の例が表示され、透明度を低下させる効果が得られます.
たとえば、上記の5つのメニューからなるホームページがあるとします.New Arrivalsのラベルにマウスを置くと、残りの4つのメニューにブルーレイ効果が発生し、ユーザーが選択したメニューを強調することがあります.
この記事では、CSSのオプションopacityを使用してBlowlerアニメーションの効果を実現し、マウスを移動するときにタブを自然に移動させるためのtransitionのオプションを確認します.

HTMLコードの設定

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Mouse over and blur animation</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="gnb">
        <a href="#none">New Arrivals</a>
        <a href="#none">Summer Collection</a>
        <a href="#none">Winter Collection</a>
        <a href="#none">Special Offers</a>
        <a href="#none">Trends</a>
    </div>

</body>
</html>
HTMLコードは以下のように簡単に整理できます.
クラス名gnbのdivラベルは、5つの要素を配置するためのラベルです.
5つの<a>ラベルはページ移動のためのメニューです.
現在、対応するHTMLを飾るために、以下のCSSを書くことができます.

CSSコードの設定

body {
    font-family: 'Raleway', sans-serif;
    color: #222222;
    line-height: 1.5em;
    font-weight: 400;

    background: royalblue;
    margin: 0;
}

a {
    color: #222222;
    text-decoration: none;
}
bodyのラベルには、フォントとテキストの色、行間、太さが設定され、背景色が指定されています.margin: 0を与え,手抜かりなく与えた.
/*가운데 왼쪽 정렬*/
.gnb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
}

.gnb a {
    display: block; /*세로 배치*/
    font-size: 40px;
    margin: 40px 0;
    color: white;
    transition: 0.5s;
}
次に、クラス名をgnbとして定義するdivラベルにスタイルを定義します.position, top, transform3のオプションは、divタグの要素を中央に並べたコードです.そしてleft: 50をあげて左に移動させました.
また、aラベルにtransitionオプションが設定されている場合、アニメーション効果は、変更時に定義された時間に従って変更されます.前述したように、マウスがマウスのタブから別のタブに移動すると、Blur効果が自然に変化します.
/*순서 변경 불가*/
.gnb:hover a {
    opacity: 0.4;
}

.gnb a:hover {
    opacity: 1;
}


/*option -> icon create*/
.gnb a:before {
    content: '>';
    font-family: fontawesome;
    margin-right: 10px;
    opacity: 0;
}

.gnb a:hover:before {
    opacity: 1;
}
順序が変更された場合、aラベルにマウスを置くと、5つのすべてのメニューの透明度が0.4になるので、順序に注意してください.
オプションセクションは、>シンボルのコードを追加するためです.aタグでは、仮想クラスにコードが生成され、初期opcaityは0であり、マウスをアップロードしていない場合は表示されない.
また、aラベルがフーバーリングの場合、仮想クラスの不透明度が1のアニメーションが使用されます.

検査結果


のようにWinter Collectionにマウスを置くと、このラベルには>の記号が表示され、そのラベルを指していることを示し、残りの4つのメニューで色が薄くなっていることが確認できます.
[プログラマー]ネットワークPython
AWS CodePipeline勉強メモ① ハローワールド