目錄

【前端動手玩創意】等待的轉圈圈效果 (1)

【前端動手玩創意】google五星評分的星星(2)

【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)

【前端動手玩創意】一句CSS做出好看的hero section！(4)

【前端動手玩創意】創造一個Skill bar(5)

【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)

【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)

【前端動手玩創意】讓你的PDF檔案更難被抓取(8)

【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)

【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)

技能條效果

原理解說

其實只要正確利用CSS的Unit(單位)，也就是%，就可以輕鬆達成囉！

程式碼內容

html的部分

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

CSS的部分

* {box-sizing:border-box}

.container {
  width: 100%; 
  background-color: #ddd; 
}

.skills {
  text-align: right; 
  padding-top: 10px; 
  padding-bottom: 10px; 
  color: white; 
}

.html {width: 90%; background-color: #04AA6D;} 
.css {width: 80%; background-color: #2196F3;} 
.js {width: 65%; background-color: #f44336;} 
.php {width: 60%; background-color: #808080;} 

心得後記

這個看似簡單的東西，最有趣的地方其實是可以使用d3.js來處理！
使用了厲害的工具套件之後，
一切就會有嶄新的面貌哦，期待未來寫一篇(◉３◉)