H5-Spezialeffekte verwischen die dynamische Listenleiste: die wunderbare Verwendung von Schatten-HTML-Tutorial-php.cn

H5-Spezialeffekte verwischen die dynamische Listenleiste: die wunderbare Verwendung von Schatten

PHPz

Freigeben： 2017-04-04 13:42:53

Original

2244 Leute haben es durchsucht

Werfen wir zunächst einen Blick auf den endgültigen Effekt

H5-Spezialeffekte verwischen die dynamische Listenleiste: die wunderbare Verwendung von Schatten

Dynamische Listenleiste

1 Die Liste ist immer eine Liste, also die Der Code lautet wie folgt:

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

Nach dem Login kopieren

Anzeigeeffekt:

H5-Spezialeffekte verwischen die dynamische Listenleiste: die wunderbare Verwendung von Schatten

Ursprüngliches Erscheinungsbild

2 Verwenden Sie die folgenden Schriftarten und setzen Sie sie nicht vor kleine schwarze Punkte und ändern Sie den Hintergrund nicht in eine andere Farbe.

body{
    background-color: #5F5F5F;
}
ul li{
    font-size: 30px;
    list-style:none;  
}

Nach dem Login kopieren

3. Um den Unschärfeeffekt im Stand zu erzielen, wird hier eine sehr clevere Methode verwendet: Schatten
Es ist keine Gaußsche Unschärfe erforderlich, sondern verwenden Sie einfach die Visuelle Effekte des menschlichen Auges.

ul li a{
    color: transparent;//字透明
    text-shadow:0 0 5px #fff;//阴影
    letter-spacing: 1px;//字距，为了好看点
}

Nach dem Login kopieren

H5-Spezialeffekte verwischen die dynamische Listenleiste: die wunderbare Verwendung von Schatten

Unschärfeeffekt im Stillstand

4. Um dynamische Effekte beim Gleiten zu erzielen, können Sie den <a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a>-Selektor

ul li a:hover{
    color:#fff;
    text-shadow:0 0 1px #fff;
    padding-left: 10px;//移动一下
}

Nach dem Login kopieren

H5-Spezialeffekte verwischen die dynamische Listenleiste: die wunderbare Verwendung von Schatten

Dynamischer Effekt

Im Grunde ist der Prototyp so gemacht, super einfach, aber der Effekt ist sehr gut. Aber ich habe immer das Gefühl, dass etwas fehlt, also habe ich eine

Animation hinzugefügt, um den Effekt zu sehen.

ul li a{
    color: transparent;
    text-shadow:0 0 5px #fff;
    letter-spacing: 1px;
    transition:all 0.4s ease-in-out;
}

Nach dem Login kopieren

Zum Schluss den gesamten Code einfügen:

JSBin

Okay, der Endeffekt ist so, reines HTML5 + CSS3 kann jetzt viele interessante Dinge erreichen Ich werde die Funktionen langsam erkunden und interessierte Freunde können sie gemeinsam besprechen.

Das obige ist der detaillierte Inhalt vonH5-Spezialeffekte verwischen die dynamische Listenleiste: die wunderbare Verwendung von Schatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!