html列表项显示阴影效果,H5特效模糊动态列表栏：阴影的妙用

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

动态列表栏

1、列表始终还是列表，所以代码如下：

首頁 HOME
文章 ARTICLE
作品 GITHUB
我 ME

显示效果：

原始模样

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、实现滑动时的动态效果，可以使用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现在可以实现很多很有趣的功能，我会慢慢挖掘，有兴趣的小伙伴可以一起探讨。

html列表项显示阴影效果,H5特效模糊动态列表栏：阴影的妙用相关推荐

html选择字段至左边的列表,css – 如何将列表项显示为保留从左到右顺序的列？...
是的,理论上应该是可能的. >由于您希望灵活项目按列排列, #flex-container { flex-flow: column wrap; } >但是元素的顺序将垂直保留(在列中).由 ...
获取服务器主列表一直显示稍等,正在获取远程列表服务器信息
正在获取远程列表服务器信息内容精选换一换精简视图提供了云服务器资源概况和状态的可视化统计结果,帮助您直观的了解云服务器资源.在精简视图中,您可以快速获取弹性云服务器基本信息.登录信息.配置信息. ...
java swing列表数据加监听,【Java Swing公开课|Java监听列表项选择事件怎么用，看完这篇文章你一定就会了】- 环球网校...
[摘要]作为一门面向对象编程语言,Java吸收了C++语言的优点,也展现了其强大的一面,我们能在各个地方看到其功能强大和简单易用的两个特征,当然,也吸引了很多程序员的注意力,所以就有人想了解Java的 ...
React结合虚拟列表VirtualList的动态获取列表项高度问题
React结合虚拟列表VirtualList的动态获取列表项高度问题: 问题场景:页面查询大量数据的时候结合VirtualList也就是虚拟列表: 例如:手机通讯录查询联系人结合虚拟列表问题描述: ...
【STM32】FreeRTOS列表和列表项详解
00. 目录文章目录 00. 目录 01. 概述 02. 列表 03. 列表项 04. 列表相关宏 05. 列表相关函数 5.1 初始化列表 5.2 初始化列表项 5.3 列表项插入函数 5.4 列 ...
(2017.9.27) 自定义列表项 list-style 使用心得
今天给某公司做招聘专页.早上完成设计图,下午开始排版.页面套用了我之前做的某人才局的招聘页面,导航栏.banner 很快就出来了.这次内容里我有些地方用了列表,当然要用 <ul> < ...
FreeRTOS的列表和列表项
列表和列表项列表列表是FreeRTOS中的一个数据结构,概念上和链表有点类型,是一个循环双向链表,列表被用来跟踪FreeRTOS中的任务.列表的类型是List_T,具体定义如下: typedef ...
FreeRTOS中列表和列表项插入函数分析
在学习FreeRTOS的过程中,看到列表和列表项插入的时候,对于列表插入函数vListInsert(),理解起来感觉比较费劲.于是对照函数画个示意图,帮助理解. 先看看列表插入函数代码. void v ...
jQuery Mobile中列表项ol、ul中的li的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中列表项li的data-*选项 //带有 data-role="listvie ...

html列表项显示阴影效果,H5特效模糊动态列表栏：阴影的妙用

html列表项显示阴影效果,H5特效模糊动态列表栏：阴影的妙用相关推荐

最新文章

热门文章