【前端动手玩创意】创造一个Skill bar(5)

目录

【前端动手玩创意】等待的转圈圈效果 (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来处理！
使用了厉害的工具套件之后，
一切就会有崭新的面貌哦，期待未来写一篇(◉３◉)