想当年哇, 刚写编程的时候, 做页面想用些绚丽的效果, 可那个是不会js, 才刚学java, 哪那么快搞股这么多东西呢. 无奈只好google搜(当年google这愣头青还才跑进中国呢), 找了一大堆, 不是运行出错就是只支持ie, 真是坑爹啊~~

当年菜单特效很流行, 好像没有动画就不能进菜单家门了. 在google N久之后, 我也终于找到一个滑动背景效果的代码. 不懂原理, 也用得不亦乐乎.

以上都是废话

嗯, 以上都是废话 . 最近偶然看到以前做的滑动背景菜单, 看了下代码, 都快笑喷了 — 天啊, 我竟然写过这么挫的代码! 所谓滑动背景菜单, 就是鼠标移上去, 会有一个气泡什么的垫在菜单下面的, 可以看看下面这个 live demo.

这个是用jq做的, 当然不是我写的, 出处在这里. 如果一个效果/动画能用css3实现, 我是绝对不想用js搞的.

以上还是废话

好, 现在我们来用css3做这个效果. 今天的主角是nth-child选择器和 ~ 选择器, 以及transition来打下龙套. 简单介绍下:

1. :nth-child(n) 选择某个元素的一个特定的子元素, n表示第几个. 例如 p span:nth-child(1), 选中p下面的第一个span, n是从1开始的, 这很怪, 猜是 w3c 的家伙集体打瞌睡了;
2. ~ 兄弟选择器, 选择跟在某个元素后面的特定兄弟元素, 例如 p ~ div选中跟p同级, 且在p后面的div;
3. + 临近兄弟选择器, 是 ~ 的特例, 选择紧跟在某个元素后面的一个特定兄弟元素, p + div则只选中贴着p的屁股的第一个div. 本文这里用不上, 说的太欢, 一下子没收住…

 背景的定位

这个效果的动画其实很简单, 把transition-property设成left, 改动left的值就能产生动画了. 关键的left的位置怎么算? 卖个关子, 先看代码.

<ul class="clearfix">
    <li><a href="javascript: void(0);">Home</a></li>
    <li><a href="javascript: void(0);">About</a></li>
    <li><a href="javascript: void(0);">Category</a></li>
    <li><a href="javascript: void(0);">Blog</a></li>
    <li><a href="javascript: void(0);">Picture</a></li>
    <li class="bubble"></li>
</ul>

ul{  position: relative; }
li{
    float: left;
    margin: 10px;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}
li.bubble{
    background: rgba(255, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
}
li:nth-child(1):hover ~ .bubble{  left: 0px; }
li:nth-child(2):hover ~ .bubble{  left: 100px; }
li:nth-child(3):hover ~ .bubble{  left: 200px; }
li:nth-child(4):hover ~ .bubble{  left: 300px; }
li:nth-child(5):hover ~ .bubble{  left: 400px; }

你看懂了没, 滑动的背景用最后一个li实现, 在鼠标移到第某个li上面的时候, 就设置跟在其后面的bubble节点的left为 为相应的值.

举例来说, li:nth-child(2):hover ~ .bubble{  left: 100px; } 就是在鼠标移到第二个li的时候, 设置背景的left为100px, 而每个li的宽度加上margin刚好100px宽度, 因此定位到了第二个菜单项下面.

你可以点这里查看demo. 在chrome中以本地文件的方式打开demo页时, 对hover跟~一起用的情况处理有bug. 如果一开始就把鼠标移到第二个以后的菜单项, 背景的定位就会不准确. 除非先把鼠标移到第一个或第二个菜单项, 之后表现就完全正常了. 不过这东西都是网站上用的, 没有人放在本地运行吧?

局限

细心的人可能也发现了, 就是这里的菜单项都是等宽的, 以及定位都是预先写好的, 有多少个菜单项就要写多少个定位. 对此我也很无奈 — 目前的css还不支持动态计算诶. css3唯一一个计算的属性 cal (哦, 忘了还有min和max), 却也不适应这种情况. 所以如果想做成能动态添加菜单的, 只能加点js了(呜呜呜, 不能全用css实现, 伦家好桑心~~ ).

既然都用了js, 那么宽度和定位都不是虾米问题, 而且即使用了js, 这个方法仍然是一级棒的, ^_^, 因为呀, 你只要添加的时候算好, 以后都不用算了呀  ~~~哗啦啦~~~万岁~~~

现在Web富应用越来越多, 越来越多网站朝单页面发展, 所有功能模块都在一个页面中创建. 作为一个合格的前端, 所负责的模块一定是逻辑跟UI分离的, 通常的做法就是页面代码编写成模板, 然后往模板填充数据并输出到页面上. 关于前端模板的介绍和使用我就不说了, 不了解的可以先看看这篇文章(http://www.css88.com/archives/4564), 这里讨论下使用模板引擎引入的另外一个问题(也不是Bug啦~) — 页面模板代码放哪?

页面模板代码放哪

呼~~总算到正题了(- -||). 说回来, 页面模板的代码到底要放哪呢?

1. 放在 js 文件中;
2. 放在页面不可见的地方, 比如 <script type=”text/plain”></script>标签内;

话说很久很久以前, 我也是把模板写在js里面的, 然后需要修改的时候就崩溃了~ 在一堆字符串里面找到想要改动的地方就像是在一坨黄色的屎里面找个金戒指(恶…). 过了不久学乖了, 把模板像写html那样换行和缩进, 就跟下面一样.

var html = '\
    <div id="container">\
    <div>...</div>\
    <div>...</div>\
</div>'

然后代价是 — 要给会混淆的引号转义以及每行末尾都要一个反斜杠! oh~天啊, 我可是程序员啊, 为什么要做这种重复无趣的工作!

于是很久很久以前的以后, 我又学乖了一次, 咱这次把模板写在html页面里面, 放到一个特殊的script标签内, 用到的时候根据id找到这个script, 读取innerHTML拿来用. 哇, 简直是perfect!~~吼吼~~

/**
 * shot of getElementById
 * @param {String} id
 */
this.get = function(id){
    return document.getElementById(id);
}
var templateList = {};
/**
 * 获取页面的一个 html 模板
 * @param {String} tmplId 模板的 dom id
 */
this.getTemplate = function(tmplId){
    var tmpl = templateList[tmplId];
    if(!tmpl){
        var tmplNode = this.get(tmplId);
        tmpl = tmplNode.innerHTML;
        tmplNode.parentNode.removeChild(tmplNode);
        templateList[tmplId] = tmpl;//缓存起来, 避免再次查找dom
    }
    if(!tmpl){
        throw new Error('no such template. [id="' + tmplId + '"]');
    }
    return tmpl;
}

模板的飞来横祸

从此, 模板和页面过着幸福快乐的生活…然后直到有一天…

A: 为什么打开页面的那个菊花转那么久!

我:…

然后就如五雷轰顶般的醒悟, 由于是单页面, 模板都堆积到页面, 大大增加了首页的大小, 没什么逻辑的页面竟然有37KB(gzip前). 更因为js/css/images等都放到了多台cdn, 读取速度快而且可以设置和利用浏览器cache. 而html页面则只放在一台web server, 而且因为版本迭代比较快, 不能给html设置缓存策略(那样会导致用户那里不能及时更新).

王子和公主就这样被硬生生拆散了~T_T

模板该放哪里

如果现在要我把模板都改成js变量, 放到js文件里, 我一定死给他看, 哼~

然而, 只是, 可是, 但是, 加载速度还是得优化啊. 既然开发的时候要方便, 发布之后要速度, 那发布前用脚本把模板抽取到js文件中不就结了? 顿时感觉柳暗花明又一村呀~~呼啦啦啦~~

抽取的步骤为:

1. 在js文件中增加一个变量 templateList, 值为 {/*HtmlTemplates*/} (注: 其实什么都行啦, 这样只是为了可以正常运行以及不让编辑器报错…);
2. 编写脚本(nodejs/python/shell/etc.), 用正则把作为模板的script的id和innerHTML都匹配出来, 拼装成一个json字符串, 如: { “templateId1″: “value…..”, “templateId2″:”xxxx”} ;
3. 读取该js文件, 把 “ {/*HtmlTemplates*/} “替换成生成的json字符串;
4. 修改getTemplate方法, 优先从templateList查找模板;

至于抽取用什么语言写都没所谓啦, 仅仅是正则和文件操作, 推荐用nodejs, 真是太方便了. 不过大部分机器都木有装, 需要自己装. 有些环境不能随便装新程序, 那也可以用python写个, 花半个钟现学现用就够了. 附上个NodeJs版的.

var fs = require('fs');
var inputHtmlFile = './index.html';
var outputHtmlFile = './out/index.html';
var inputJsFile = './js/mb.templates.js'
var outputJsFile = './out/js/mb.templates.js';

var content = fs.readFileSync(inputHtmlFile).toString();
var regex = /<script\s*id="(\w+)"\s*type="text\/plain"\s*>([\s\S]*?)<\/script>/ig;

var result = {};
content = content.replace(regex, function(m, $1, $2){
    result[$1] = $2.replace(/\n|\r/g, '');
    return '';
});
fs.writeFileSync(outputHtmlFile, content);

content = fs.readFileSync(inputJsFile).toString();
var templateStr = JSON.stringify(result);
content = content.replace('{%HtmlTemplates%}', templateStr);
fs.writeFileSync(outputJsFile, content);

收尾

经过这么一搞, 把模板代码抽出来之后, 首页的大小立马从37KB降到1.7KB. 虽然是个小技巧, 也足以成大谋. 那感觉, 可是跟涨薪一样爽哇~~

做完这个小玩意之后, 我觉得, 我一定是闲得蛋疼才做的. 嗯, 一定是的.

话说昨天今天加班, 下午下班前总算把临时变更的需求完成的七七八八了, 昨晚又爬了一趟南山, 累的不行…

想起某个产品说的, 工作累了, 就写写代码, 休息一下 =_=||

好了, 言归正传. 下午偶然看到一个jquery+css3实现的时钟, 挺漂亮的, 突然觉得是不是也可以用纯css3整一个, 于是乎…先看看最终效果

 或者你也可以直接点这里看代码(因为我太喜欢啰嗦啦…)

表盘

好了, 先搭个结构, html挺简单的, 没几个代码, 看看下面:

<div class="clock">
<div class="clock-dial">
<span></span>...<span></span>
</div>
<div class="clock-pointer">
<div></div><div></div><div></div><div></div>
</div>
</div>

嗯, 一个整体容器, 一个表盘, 加上三根指针. 等等, 那个省略了的span, 你猜有多少个?

那里总共有60个span, 没错, 是的, 60个! 诶, 为了表示刻度, 咱也没法子呀.

先给 clock 和 clock-dail写上样式, 配个色 搞点阴影什么的, 哇, 帅气!

然后麻烦的刻度定位来了, 尝试了几种方式, 最终决定给内圆画60个半径, 全部排在12点钟的方向, transform-origin设置成最下面((50% 100%) or (center bottom)) 然后按顺序旋转 6弧度(transform:rotate(6deg)), 铺满整个圆.  然后用 before 伪对象插入最终显示的刻度. 为了定位和演示, 暂时把刻度的容器都显示出来了. 不了解transform的请看这里(http://www.w3.org/TR/css3-2d-transforms/)

.clock-dial span{
    display: block;
    width: 2px;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0 0 0 -1px;
    -webkit-transform-origin: center bottom;
}
.clock-dial span:before{
    content:' ';
    display: block;
    height: 13px;
    width: 2px;
    background: #353535;
    margin: 10px 0 0 0;
}
/** 四个大刻度 **/
.clock-dial span:nth-child(5n){
    width: 6px;
    margin-left: -3px;
}
.clock-dial span:nth-child(5n):before{
    height: 32px;
    width: 6px;
    border-radius: 0 0 5px 5px;
}
/** end 四个大刻度 **/
/** 各个刻度的定位 **/
.clock-dial span:nth-child(1){
    -webkit-transform: rotate(6deg);
}
.clock-dial span:nth-child(2){
    -webkit-transform: rotate(12deg);
}
/** ...省呀省略呀 **/
.clock-dial span:nth-child(60){
    -webkit-transform: rotate(360deg);
}
/** end 各个刻度的定位 **/

跟你看到的一样, 画刻度的代码可是又臭又长的. 什么? 你手打了60 * 3次(webkit, moz, w3c)? 拜托, 我们是程序员耶. 写个for循环 拼装字符串,   几秒钟搞定(这个代码我就不写了, 程序员都懒嘛~~). 每逢5的倍数, 数到的刻度要粗点, 表示一刻钟, 嗯, 又粗又长.(nth-child 是什么?  看看这里)

指针

指针也是一样操作, 先摆到12点钟方向, 变形原点放在下面, 之后再把第四个div搞成圆形(border-radius等于宽高就行了), 盖在中间, 是不是一个钟就出来啦. 秒针做一下微调, 用before和after插入两个节点, 做成尾巴. 为什么不用标签? 因为刻度已经用了那么多节点, 能省就省啦(该死的刻度!)

.clock-pointer{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.clock-pointer div{
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;

    -webkit-transform-origin: center bottom;
}
.clock-pointer div:nth-child(1){
    border-radius: 10px 10px 0 0;
    width: 20px;
    height: 110px;
    margin: -110px 0 0 -10px;
    -webkit-animation: hour-update 43200s linear infinite;
}
.clock-pointer div:nth-child(2){
    border-radius: 5px 5px 0 0;
    width: 10px;
    height: 180px;
    margin: -180px 0 0 -5px;
    -webkit-transform: rotate(60deg);
    -webkit-animation: minute-update 3600s linear infinite;
}
.clock-pointer div:nth-child(3){
    border-radius: 5px 5px 0 0;
    width: 6px;
    height: 190px;
    margin: -190px 0 0 -3px;
    background: #AD251E;
    -webkit-transform: rotate(90deg);
    -webkit-animation: second-update 60s step-end infinite;
}
.clock-pointer div:nth-child(3):before{
    content: ' ';
    background: #AD251E;
    display: block;
    width: 6px;
    height: 30px;
    position: absolute;
    left: 0;
    bottom: -30px;
}
.clock-pointer div:nth-child(3):after{
    content: ' ';
    border-radius: 3px;
    background: #AD251E;
    display: block;
    width: 12px;
    height: 40px;
    position: absolute;
    left: -3px;
    bottom: -60px;
}
.clock-pointer div:nth-child(4){
    background: #AD251E;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 12px;
}

 数字

是不是漏了什么? 数字, 没数字太不直观了. 嗯, 我们之前已经加了60个刻度, 只要在逢5的刻度插入一个数字不就行啦. 但是在60个span中找出12个, 貌似也很痛苦对吧.

哈哈, 如果你还记得大明湖畔的counter-reset和counter-increment , 你一定知道怎么做了(如果你实在不记得, 请看这里). 因为刻度所在的span被旋转过了, 导致插入的数字也旋转了, 因此要对每个数字再转回来. 跟上面一样, 这里肯定是用for循环跑出来的啦(别告诉我你又手打了…>)

.clock-dial span:nth-child(5n):after{
    content: counter(clockcounter);
    counter-increment:clockcounter;
    font: 50px/1 Georgia;
    font-weight: bold;
    font-style: italic;
    color: #494949;
    position: absolute;
    left: -30px;
    width: 60px;
    text-align: center;
}
.clock-dial span:nth-child(5):after{    -webkit-transform: rotate(-30deg);}
/** ......(无所不在的省略号) **/
.clock-dial span:nth-child(60):after{    -webkit-transform: rotate(-360deg);}

 奔跑吧

终于到了最激动人心的时刻啦, 接下来让时钟动起来. css3的animation是个好东西, step-end也是个好孩子, 如果你没听过, 先看看这里和那里 ＾_＾

让秒针的动画60s转一圈, 分针 60分一圈,时针12小时一圈, 就能模拟时间的流逝了. 分针和时针的动画没什么好说呃, 相当简单.

/************* 时针的动画 ******************/
@-webkit-keyframes hour-update{
    0%{ -webkit-transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(360deg); }
}
/************* 分针的动画 ******************/
@-webkit-keyframes minute-update{
    0%{ -webkit-transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(360deg); }
}

而秒针的有点麻烦, 由于keyframes的进度是0~100%的, 而秒针一次动画的时间是60s, 就需要把100的区间分成60段. 不过还好咱是程序员, for循环一下不就结了?(悲催的for ^_^)

/************* 秒针的动画 ******************/
@-webkit-keyframes second-update{
    0%{ -webkit-transform: rotate(0deg);}
    1.667%{ -webkit-transform: rotate(6deg);}
    ......
    98.333%{ -webkit-transform: rotate(354deg);}
    100%{ -webkit-transform: rotate(360deg);}
}

最后, 上动画, 噔噔噔噔~~你看, 他动起来了, 啊, 一秒一格, 啊, 奔跑吧~(请原谅这个2b作者吧…)

.clock-pointer div:nth-child(1){
    -webkit-animation: hour-update 43200s linear infinite;
}
.clock-pointer div:nth-child(2){
    -webkit-animation: minute-update 3600s linear infinite;
}
.clock-pointer div:nth-child(3){
    -webkit-animation: second-update 60s step-end infinite;
}

不足

嗯, 其实我觉得没什么不足的, 嘿嘿. 太自恋了.

最大的问题在于, 因为没有用到丁点儿js, 所以不能从系统当前时间开始跑, 只能当秒表用用. 或者上厕所的时候打开这个页面, 开始计时, 看看自己用了多少时间”爆石” *_*|||

但是在看到天才的师姐给的例子之后, 让我愧疚得无地自容, 原来还真有css3帧动画的, T_T. 这个属性是 timing-function: step-end; 而且firefox,webkit,ie10都有支持, 详细介绍可以在这里(https://developer.mozilla.org/en/CSS/timing-function#step-end)看.

跟帧动画有关的timing-function有step-start, step-end, 就那step-end来说, 它的效果是在每一步的结束点, 进行跳变.

比如下面的代码, 这个动画有两步, 如果是用linear方式渐变, 那么在动画的执行过程中, background-position-x的值将从0一直递减到-100%, 你看到的效果就是: 背景图片一直在慢慢的向右(注意, 是向右)移动; 而如果用step-end方式, 则可以看到背景是突然变成 background-position-x: -100%处的.

@-webkit-keyframes auto-circle{
    0%{
      background-position-x: 0;
    }
    100%{
      background-position-x: -100%;
    }
}

说的再多也不如演示来的实际, 有了step-end, 我们又可以实现一种菊花啦, 高清无码, 这下子gif要完完全全的失业了,嘿嘿… 你可以把鼠标狠狠地砸向这里( http://demo.imatlas.com/css3-frame-loading-demo.html )看demo, 完整的代码如下:

@-webkit-keyframes auto-circle{
    0%{
      background-position-x: 0;
    }
    10%{
      background-position-x: -100%;
    }
    20%{
      background-position-x: -200%;
    }
    //... 你看不到的省略代码
    90%{
      background-position-x: -900%;
    }
    100%{
      background-position-x: -1000%;
    }
}
@-moz-keyframes auto-circle{
    0%{
      background-position-x: 0;
    }
    10%{
      background-position-x: -100%;
    }
    20%{
      background-position-x: -200%;
    }
    //... 你看不到的省略代码
    90%{
      background-position-x: -900%;
    }
    100%{
      background-position-x: -1000%;
    }
}
.loading{
    background: url(http://imatlas.com/wp-content/uploads/2011/10/loading3.png) 0 0;
    width: 128px;
    height: 128px;
    -webkit-animation: auto-circle 0.5s step-end infinite ;
    -moz-animation: auto-circle 0.5s step-end infinite ;

    margin: 20px;
}

因为是帧动画, 你就需要确定这个菊花有多少帧, 然后用百本比划分keyframes. 如果是两帧, 一个0%和一个100%就够了. 我的图片有10帧, 所以我把它划成10%一帧, 0%跟-1000%是同一帧.

另外这里我用百分比设置position, 好处是如果loading的大小改变了, 并不需要去修改keyframes的background-position, 就能够一劳永逸啦 ^_^.

参考资料:

1. http://dev.w3.org/csswg/css3-transitions/#transition-timing-function
2. https://developer.mozilla.org/en/CSS/timing-function#step-end
3. http://msdn.microsoft.com/en-us/library/windows/apps/hh466322.aspx

既然你还在继续看到这, 那么你可能知道box-shadow, 不过我还是要讲概念, ^_^.  box-shadow, 顾名思义就是盒子阴影, 可以给一个块级容器加上阴影或者发光效果. 效果如下:

把阴影的颜色和透明度调整下, 就可以整成发光效果了. 不过今天的主角不是他, 略过.

说回正事, 这box-shadow虽然好用, 可是有时还会遇到蛋疼的设计, 搞出只有一边的内阴影. 而box-shadow最多只能做到剩下两边有阴影(看下面,看下面↓), 这可愁死了咱这苦命的娃啊.

不知道你囧没, 反正我囧了~~

本着除非打死否则不用图片的思想, 还是被我找到了实现的方法, 嘿嘿~~先看看效果

demo啊, 发疯地点这里吧

嗯咳, 原理是用:before伪元素插入一个元素作为阴影的容器, 绝对定位并铺满整个框. 然后在这个容易用线性渐变画个背景就完成了. 由于绝对定位, 会覆盖到原本的内容, 这时只要给阴影设置个 z-index: -1 据解决了. 下面看看这神奇的代码~~

.gradient-shadow{
    position: relative;
}
.gradient-shadow:before{
    content: ' ';
    background: -webkit-linear-gradient(top, #BBB,#EEE ,white 20%);
    background: -moz-linear-gradient(top, #BBB,#EEE ,white 20%);
    background: -o-linear-gradient(top, #BBB,#EEE ,white 20%);
    background: linear-gradient(top, #BBB,#EEE ,white 20%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: -1;
}

html

<div  class="gradient-shadow">
<p>这里是只有一边的2B阴影</p>
</div>

而在那个远古的蛮荒时代, 还生活着一种叫攻城师的生物, 每天被产品经理们强迫着, 想方设法让checkbox外观一统江湖, 苦不堪言.

在那个时代, css2和dom level2风行, 却对checkbox束手无策, 苦逼的攻城师们只能用JS来模拟checkbox的行为, 无辜的checkbox只能灰溜溜的束之高阁~.~

终于, 新时代还是来临了~攻城师的救世主——CSS3, 就像十字军东征一样, 所向披靡, 一往直前的来到我们面前, 依靠CSS3的得力大将(:checked 伪类 和 +,~ 选择符), 攻城师们终于可以抛开万恶(阿弥陀佛, 形势所逼, 勿怪勿怪…)的JS, 把checkbox迎接了回来.

================== 我是时间的分割线 ==================

好了, 欢迎回到21世纪, ^_^.  话说我们这次还是模拟checkbox, 但是却没抛开checkbox, 利用:checked伪类和兄弟选择符(+/~), 用另外一个节点实现一个统一外观的checkbox, 而真正的checkbox这是用来保存选中态, 而且, 完全没用用到js哦亲~

嗯 , 其实上面的都是废话, 代码才是王道. 好, 见证奇迹的时刻~~

================== 我是华丽丽的代码分割线 =============

.checkbox{
    display: none;
}
.checkbox + label{
    width: 24px;
    height: 12px;
    display: inline-block;
    border: 1px solid #959595;
    margin: 3px;
    vertical-align: middle;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.checkbox + label span{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;

    background: -webkit-linear-gradient(top, #5071F5, #0E38E7);
    -webkit-transition: left 0.1s;
    border-radius: 2px 0 0 2px;
}
.checkbox ~ select{
    vertical-align: middle;
    display: none;
}
.checkbox ~ .cate-1{
    display: inline-block;
}
.checkbox:checked + label span{
    left: 50%;
    border-radius: 0 2px 2px 0 ;
}
.checkbox:checked ~ .cate-2{
    display: inline-block;
}
.checkbox:checked ~ .cate-1{
    display: none;
}

下面是html代码

<div class="content">
<span class="tips">请狠狠的点击我吧 --&gt;</span>
<input id="imCheckbox" type="checkbox" class="checkbox">
<label for="imCheckbox"><span></span></label>
<select class="cate-1"><option>我是分类1~啦啦啦啦</option></select>
<select class="cate-2"><option>我是分类2~hohoho~~</option></select>
</div>

其实也就是多了一个label标签, 用label模拟checkbox, 然后把checkbox偷偷的藏起来. 当点击label的时候, 会触发checkbox的选中态的变更. 当checkbox被选中的时候, :checked伪类就会起作用. +选择符是用来选择跟着checkbox屁股的兄弟的, 也就是label. 而~选择符则是选择跟在他屁股后面的所有兄弟, 如select等.

如果你还不相信, 可以点击<<这里>>看活生生血淋淋的例子.

这里为了装逼, 我模拟了ios上面的checkbox, 带滑块的, 如果你只是要模拟原生的checkbox , 连label里面的span标签都可以省掉.

另外, 利用:checked和兄弟选择符还能做更多的事哦, 比如, checkbox没选中的时候显示一个下拉框, 没选中的时候显示另一个下拉框, 效果还是看例子吧.

故事到此为止, 后面就由你续写啦~~

PS: 本博文同步发表到webpluz.org, 欢迎分享拍砖

缓存时间好办, 两三下就搞定了.

但是gzip在网上收罗了半天, 都没找到能在本服务器使用的代码. 下面是找到的一个配置:

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css  application/x-javascript
</IfModule>

实验证明, 无效! 看来可能是icdsoft的apache太诡异了<_<

黄天不负有心人,淘了半天, 总算找到一个可用的, 如下.具体为什么呢, 我就懒得去追究了, 毕竟咱的G点不在这啊

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_keep_workfiles No
mod_gzip_can_negotiate Yes
mod_gzip_add_header_count Yes
mod_gzip_send_vary Yes
mod_gzip_command_version ‘/mod_gzip_status’
mod_gzip_min_http 1000
mod_gzip_minimum_file_size 300
mod_gzip_maximum_file_size 512000
mod_gzip_maximum_inmem_size 60000
mod_gzip_handle_methods GET POST
mod_gzip_temp_dir /tmp
mod_gzip_item_include file \.html$
mod_gzip_item_include file \.php$
mod_gzip_item_include file \.pl$
mod_gzip_item_include file \.rb$
mod_gzip_item_include file \.py$
mod_gzip_item_include file \.cgi$
mod_gzip_item_include file \.css$
mod_gzip_item_include file \.js$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^httpd/unix-directory$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include handler ^server-status$
mod_gzip_item_include handler ^server-info$
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^images/.*
</IfModule>

谨以此文记之. 嗯, 顺便贴个gzip检查的网站 http://tool.chinaz.com/Gzips/

登录到后台, 发现htaccess被做了urlrewirte, 跳到恶意网站了, 立刻删除之.

令人崩溃的时, 过了会它又回来啦. 反反复复搞了几次, tmd, 老子把博客目录下的php全删了. 终于没重现了, 看来是某个php文件被感染了, 一传十十传百的, 日.

搞了一晚上才把数据和上传的资料恢复, 看来搞个corn job定时备份还是必须的. 而且所有文件都不能给匿名写权限, 太大意了.

嗯, 以此文警示之.

———————————————————–

@2011-1-11 迁移完成, 撒花~~ 哈哈

但是美中不足的是, 还要画一张图片. 如果要求做几个不同大小的菊花, 或者要换个颜色, 又或者要不同的地方用不同的颜色和大小的菊花, 得找到原图(psd之类的)再导出一个不同的size, 个人感觉蛋疼死了.

这次咱们用css3来画那几个点, 让它能大能小能色, 嘿嘿~~(邪恶了).

先看看效果吧, 用鼠标左键狠狠的砸这里.

菊花上有12个点, 我们用12个span标签来做, 宽高使用百分比, 用来自适应外层容器的变化, 圆角设置为100%,就可以保证显示成一个圆了.

接下来的事情就比较痛苦, 需要一个个摆到正确的位置. 但是为了以后的幸福生活哇, 咱也得硬着头皮的上是吧.

好在有了css3的选择器,我们也不用一个个给这些span起名字了,span:nth-child(1)就表示第一个span, nth-child的值是从1开始的,感觉有点怪异.

定位的话用绝对定位, 然后用负的margin把圆心偏移回去, 位置要自己算好, 具体可以看 demo.

css代码我就不贴全了,避免凑字数的嫌疑, 关键代码如下:

.loading{
    width: 50px;
    height: 50px;
}
.loading div{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-animation: auto-circle 1s linear infinite ;
    -moz-animation: auto-circle 1s linear infinite ;
}
.loading div span{
    display: block;
    background: #04AED9;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
}
.loading div span:nth-child(1){
    width: 18%;
    height: 18%;
    left: 50%;
    top: 0%;
    margin-left: -9%;
}
.loading div span:nth-child(2){
    width: 16.5%;
    height: 16.5%;
    top: 15%;
    left: 28%;
    margin-left: -8.25%;
    margin-top: -8.25%;
}
/*:nth-child(3)--> :nth-child(12) */

除了loading的外框, 全部值都是用百分比, 这样12个小点的大小和位置都能随着外框的大小改变而改变了, 连颜色都能随便改, 爽了吧.

后传:

某产品: 这个菊花改成16px的, 那个换成红色的.

苦逼代码男: 32px改成16px是吧, 蓝色换成红色是吧,  嗯, 改完了, 吃饭~~

某产品: …… 

=== 2012-4-4更新 ===
有同学反映, 这个百分比宽度不会算. 其实很简单那的呐:

1. 先定下最大的那个圆的宽度, 比如这的 第一个, 18%;
2. 然后这里的菊花有12个瓣, 18 / 12 = 1.5;
3. 之后第二个第三个就一直从18%往下减就行啦