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

动态列表栏
1、列表始终还是列表,所以代码如下:
显示效果:

原始模样
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、实现滑动时的动态效果,可以使用:hover选择器
功能列表:底层程序与前台页面分离的效果,对页面的修改无需改动任何程序代码。完善的标签系统,支持自定义标签,公用标签,快捷标签,动态标签,静态标签等等,支持标签内的vbs语法,原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统,可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率,稳定性和容错性,即使模版中有错误的标签也不会影响页面的显示。所有的标
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现在可以实现很多很有趣的功能,我会慢慢挖掘,有兴趣的小伙伴可以一起探讨。









