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

PHPz
发布: 2017-04-04 13:42:53
原创
2487人浏览过

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

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、实现滑动时的动态效果,可以使用:hover选择器

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中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号