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

工具下載地址和使用方法，都在這裏

最後歡迎關注個人公衆號，吵吵日記