H5特效模糊動態清單欄：陰影的妙用-html教學-PHP中文網

首頁

web前端

html教學

H5特效模糊動態清單欄：陰影的妙用

PHPz

Apr 04, 2017 pm 01:42 PM

讓我們先看看最終實現的效果

H5特效模糊動態清單欄：陰影的妙用

動態列表欄

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>

登入後複製

顯示效果：

H5特效模糊動態清單欄：陰影的妙用

#原始模式

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

登入後複製

H5特效模糊動態清單欄：陰影的妙用

靜止時的模糊效果

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

登入後複製

H5特效模糊動態清單欄：陰影的妙用

動態效果

基本上原型就這樣搞定了，超級簡單，但是實現的效果很好。但是總覺得差了點什麼，加上動畫效果看看。

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7733

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1290

PHP教程

1233

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。