轩枫阁

简介

一组CSS3实现的Loading加载图标，很简单漂亮，对于不支持的浏览器也可以方便的Fallback

效果预览

在线预览

http://xuanfengge.com/demo/201409/SpinKit-master/

图片效果

查看全文

前言

分享一段创意相册交互：透明层聚焦框跟随鼠标在相册的图片上移动，聚焦框跟随图片大小改变形状，利用CSS3实现渐变透明效果，大方美观。

效果预览

美图酷览：http://www.xuanfengge.com/gallery/dudulun 查看全文

前言

所谓的社会化评论，即网站的评论系统集成“QQ、QQ空间、新浪微博，人人网、豆瓣”等社交账号及第三方平台的单点登录功能，实时评论同步，实名制留言将大大提高评论的质量和传播效率。通过插件安装、插入代码等方式使用社会化评论。如今wordpress、DedeCMS、DISCUZ等众多博客均可使用。

现今的社会化评论系统，主要有：友言、多说、畅言、灯鹭。

轩枫阁从13年3月上线时，一直使用多说，只因其UI及体验吸引住了我。使用灰色背景，完美搭配多说自带主题，无需自定义CSS。但是最近发现多说的自定义CSS功能结合CSS3可以做一些炫酷的效果，主要是针对头像。

关于多说

多说是一款追求极致体验的社会化评论框，可以用微博、QQ、人人、豆瓣等帐号登录并评论。多说帮助用户搭建更活跃，更互动的评论平台，功能强大且永久免费。它正在改变网站与用户之间，用户与用户之间的互动方式。这个专门基于社交网络的评论系统，能够轻松的帮网站主搭建自己互动性极强的社区，让留言的用户都有“家”的感觉。

效果图

查看全文

前言

CSS3 Filter与我们所熟悉的CSS Filter是完全不同的两个概念，也不是所谓的IE滤镜，它是指通过CSS或SVG渲染元素概念可以描述的元素，包括子元素。

语法

语法很简单，grayscale的参数中100%表示黑白色调，0%表示彩色。

demo

链接

http://xuanfengge.com/demo/201408/gray/ 查看全文

面试题

<ul>有 10000 个<li>子元素，如何将这 10000 个<li>颠倒顺序。要求是效率尽量高。不光是算法效率，还要考虑DOM元素操作的效率。via：V2EX。

方案设想

1. 先复制一份 (不要插入到DOM中,频繁的操作DOM消耗资源是很大的)

2. 对复制出的这份做操作. 方法是从最后一个开始拿插入到一个新的<ul>中 (这一步也不需要插入到DOM中)

3. 将DOM中的<ul>更换为从新排序的<ul>

优点：在内存中操作完成，然后插入到页面中，效率上有所提升。

缺点：复制的实现复杂效率也不高，cloneNode 也不克隆事件。

一看到这道题，很多人也就在想利用JS，结合算法实现出来。但是最佳的方案竟然不是这个。

最佳方案

利用CSS3，以下代码，有想到如何实现没？ 查看全文