H5特效模糊動態清單欄：陰影的妙用
- PHPz原創
- 2017-04-04 13:42:532154瀏覽
讓我們先看看最終實現的效果
動態列表欄
1、列表始終還是列表，所以程式碼如下：
<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>
顯示效果：
#原始模式
2、然後調整以下字體和不要前面的小黑點，把背景換成其他顏色。
body{
background-color: #5F5F5F;
}
ul li{
font-size: 30px;
list-style:none;
}
3、為了達到靜止時的模糊效果，這裡用了一個很機智的方法： 陰影
不需要什麼高斯模糊的，就是利用人眼的視覺效果。
ul li a{
color: transparent;//字透明
text-shadow:0 0 5px #fff;//阴影
letter-spacing: 1px;//字距，为了好看点
}
靜止時的模糊效果
4、實作滑動時的動態效果，可以使用<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a>選擇器
ul li a:hover{
color:#fff;
text-shadow:0 0 1px #fff;
padding-left: 10px;//移动一下
}
動態效果
基本上原型就這樣搞定了，超級簡單，但是實現的效果很好。但是總覺得差了點什麼，加上動畫效果看看。
ul li a{
color: transparent;
text-shadow:0 0 5px #fff;
letter-spacing: 1px;
transition:all 0.4s ease-in-out;
}
最後放上所有程式碼：JS Bin
好啦，最後的效果就這樣了，純HTML5+CSS3現在可以實現很多很有趣的功能，我會慢慢挖掘，有興趣的朋友可以一起探討。
以上是H5特效模糊動態清單欄：陰影的妙用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn