H5特效模糊动态列表栏：阴影的妙用-html tutorial-php.cn

H5特效模糊动态列表栏：阴影的妙用

PHPz

Lepaskan： 2017-04-04 13:42:53

asal

2229 orang telah melayarinya

让我们先看看最终实现的效果

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>

Salin selepas log masuk

显示效果：

H5特效模糊动态列表栏：阴影的妙用

原始模样

2、然后调整以下字体和不要前面的小黑点，把背景换成其他颜色。

body{
    background-color: #5F5F5F;
}
ul li{
    font-size: 30px;
    list-style:none;  
}

Salin selepas log masuk

3、为了达到静止时的模糊效果，这里用了一个很机智的方法：阴影
不需要什么高斯模糊的，就是利用人眼的视觉效果。

ul li a{
    color: transparent;//字透明
    text-shadow:0 0 5px #fff;//阴影
    letter-spacing: 1px;//字距，为了好看点
}

Salin selepas log masuk

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

Salin selepas log masuk

H5特效模糊动态列表栏：阴影的妙用

动态效果

基本上原型就这样搞定了，超级简单，但是实现的效果很好。但是总觉得差了点什么，加上动画效果看看。

ul li a{
    color: transparent;
    text-shadow:0 0 5px #fff;
    letter-spacing: 1px;
    transition:all 0.4s ease-in-out;
}

Salin selepas log masuk

最后放上所有代码：JS Bin

好啦，最后的效果就这样了，纯HTML5+CSS3现在可以实现很多很有趣的功能，我会慢慢挖掘，有兴趣的小伙伴可以一起探讨。

Atas ialah kandungan terperinci H5特效模糊动态列表栏：阴影的妙用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

H5特效模糊动态列表栏：阴影的妙用