HTML + CSS 小技巧

MrXu_發表於2018-07-01
HTMLCSS

我總想寫點東西，可是寫出來的東西並沒有我想的那麼好（少的可憐的閱讀量證明了這一點），這些事情令我懊惱了很久。可以說是在寫作過程中我漸漸的忘記了寫作的初衷（從別人的文章中獲取了知識，得到了答案。也應該分享自己的知識，解決別人的困難）。這可能也是導致我寫的比較多，但是質量不佳的原因吧。

我是阮一峰的忠實讀者了，他寫的每一篇文章我都會讀，敬佩他的文筆與見解，寫
“每週分享”這個主題也是借鑑的阮大大，並且希望有這麼一個值得追求的事情讓我能夠每週看見自己的進步，爭取能夠寫出越來越好，越來越精闢的文章，如果有幸幫助到了你，那真是一件特別讓我開心的事情。

如無意外，每週更新時間為週日

阮一峰部落格連結

1.label標籤for屬性的妙用

 HTML + CSS 小技巧


來看一下用這個東西能做的炫酷事情吧：

①.只用CSS和html實現一個風扇

HTML + CSS 小技巧

拋去開關的單擊事件來說，其他的不用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
HTML + CSS 小技巧

核心原理跟上面的風扇效果一樣
專案地址點這裡

2.使用canvas做一個小遊戲

 
學習理論知識或者說是學習API是一件非常枯燥的事情，尤其是學完了還不一定能夠學以致用，如果在學習的時候能夠直接做一個有趣的小demo那豈不是美滋滋，下面這個視訊講了做遊戲的基本概念，並且能夠讓你對canvas的API掌握的更牢固
視訊地址
專案地址

3.MindMaster一個不錯的腦圖工具

僅僅是做一個腦圖，我就不推薦這款工具了，畢竟Xmind也能夠做，但是他的雲服務我總是連不上，造成我體驗不佳。所以我又找了一款（MindMaster）,這樣我回家的時候只需要登入我的MindMaster賬號就可以同步我在公司做的腦圖了，比較方便。

4.本篇文章中使用的gif圖片製作工具 Gifcam

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

最後歡迎關注我的公眾號，吵吵日記

HTML + CSS 小技巧


相關文章