HTML + CSS 小技巧

我总想写点东西，但是写出来的东西并无我想的那么好（少的可怜的阅读量证实了这一点），这些事情令我懊恼了好久。能够说是在写做过程当中我渐渐的忘记了写做的初衷（从别人的文章中获取了知识，获得了答案。也应该分享本身的知识，解决别人的困难）。这可能也是致使我写的比较多，可是质量不佳的缘由吧。

我是阮一峰的忠实读者了，他写的每一篇文章我都会读，敬佩他的文笔与看法，写
“每周分享”这个主题也是借鉴的阮大大，而且但愿有这么一个值得追求的事情让我可以每周看见本身的进步，争取可以写出愈来愈好，愈来愈精辟的文章，若是有幸帮助到了你，那真是一件特别让我开心的事情。

如无心外，每周更新时间为周日

阮一峰博客连接

1.label标签for属性的妙用

 

来看一下用这个东西能作的炫酷事情吧：

①.只用CSS和html实现一个风扇

抛去开关的单击事件来讲，其余的不用JS实现彷佛并无什么难的，只要你熟练使用了CSS3的动画和CSS3的阴影，作一个永远不中止转动的风扇并不困难。可是不使用JS实现一个开关你就必须掌握label的for属性的用法
核心代码以下：

//html代码
<input id='switch' type='checkbox'>
<label class='switch' for='switch'></label>
//css代码
#switch:checked ~ .switch:before {
  transform: translateY(-50%) rotate(20deg);
}
#switch:checked ~ .head .blades {
  animation: spin 1s linear infinite;
}复制代码

经过label的for属性绑定type为checkbox的input框，当单机label的时候就会实现input框checked的状态改变，从而经过#switch:checked他来控制是否有动画，想要查看这个项目能够单机下方的连接，若是看不懂项目中的预编译器的写法能够打开控制台直接下载编译过来的index.html文件
项目地址点这里

②.只用CSS和html实现炫酷的toggle和radio

上面的太玄没有实用性，那你看一下这俩个日常使用特别多的checkbox和radio

核心原理跟上面的风扇效果同样
项目地址点这里

2.使用canvas作一个小游戏

 
学习理论知识或者说是学习API是一件很是枯燥的事情，尤为是学完了还不必定可以学以至用，若是在学习的时候可以直接作一个有趣的小demo那岂不是美滋滋，下面这个视频讲了作游戏的基本概念，而且可以让你对canvas的API掌握的更牢固
视频地址
项目地址

3.MindMaster一个不错的脑图工具

仅仅是作一个脑图，我就不推荐这款工具了，毕竟Xmind也可以作，可是他的云服务我老是连不上，形成我体验不佳。因此我又找了一款（MindMaster）,这样我回家的时候只须要登陆个人MindMaster帐号就能够同步我在公司作的脑图了，比较方便。

4.本篇文章中使用的gif图片制做工具 Gifcam

工具下载地址和使用方法，都在这里

最后欢迎关注个人公众号，吵吵日记