Home > Article > Web Front-end > H5 special effects blur dynamic list bar: the wonderful use of shadows
H5 special effects blur dynamic list bar: the wonderful use of shadows
- PHPzOriginal
- 2017-04-04 13:42:532226browse
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:
<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>
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!