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:

 
 
 
 首頁 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:hoverSelector

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 addanimationto 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:JSBin

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!