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

Let’s take a look at the final effect first

Dynamic list bar

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

    <p>
        </p>

            
•                 首頁 HOME             
            
•                 文章 ARTICLE             
            
•                 作品 GITHUB             
            
•                 我 ME             
        

    

Display effect:

#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;  
}

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;//字距，为了好看点
}

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;//移动一下
}

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

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!