H5 special effects blur dynamic list bar: the wonderful use of shadows-HTML Tutorial-php.cn

H5 special effects blur dynamic list bar: the wonderful use of shadows

PHPz

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

Original

2282 people have browsed it

Let’s take a look at the final effect first

H5 special effects blur dynamic list bar: the wonderful use of shadows

Dynamic list bar

1. The list is always a list, so the code is as follows:

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

Copy after login

Display effect:

H5 special effects blur dynamic list bar: the wonderful use of shadows

#Original appearance

2. Then adjust the following fonts and remove the small ones in front Black dot, change the background to another color.

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

Copy after login

3. In order to achieve the blur effect when still, a very clever method is used here: Shadow
No need for Gaussian blur, just use the visual effect of the human eye .

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

Copy after login

H5 special effects blur dynamic list bar: the wonderful use of shadows

Blurred effect when still

4. To achieve dynamic effects when sliding, you can use <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;//移动一下
}

Copy after login

H5 special effects blur dynamic list bar: the wonderful use of shadows

Dynamic effect

Basically the prototype is done like this, it’s super simple, but the effect is very good good. But I always feel like something is missing, so I’ll add animation to see the effect.

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

Copy after login

Finally put all the code: JS Bin

Okay, the final effect is like this. Pure HTML5+CSS3 can now achieve many interesting functions. I will dig it out slowly, and interested friends can discuss it together.

The above is the detailed content of H5 special effects blur dynamic list bar: the wonderful use of shadows. For more information, please follow other related articles on the PHP Chinese website!